如何根据设备宽度重排网页设计，实现桌面与移动端不同布局

要实现桌面端、移动端不同布局，核心用CSS响应式规则即可，最常用的是媒体查询方案，操作步骤如下：

1. 先在HTML头部加入视口声明，保证移动端能正确识别屏幕宽度

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 写基础布局样式，推荐用移动端优先的写法，先写小屏样式，再通过媒体查询适配大屏，示例代码如下：

/* 移动端默认布局，比如导航在上，内容在下 */
.layout-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sidebar {
  height: 56px;
  background: #f0f0f0;
}
.main-content {
  min-height: 600px;
  background: #e8e8e8;
}

/* 桌面端适配，这里以768px为断点，可根据实际需求调整数值 */
@media (min-width: 768px) {
  .layout-container {
    flex-direction: row;
  }
  .sidebar {
    width: 220px;
    height: auto;
  }
  .main-content {
    flex: 1;
  }
}

如果是用前端UI框架，比如Tailwind CSS、Bootstrap这类，框架本身已经内置了不同尺寸的响应式断点，直接调用对应的类名就可以实现布局切换，不需要手动写媒体查询代码。

你也可以用CSS Grid实现更复杂的响应式结构，逻辑和上面一致，只需要在媒体查询内修改grid的模板配置即可。

内容的提问来源于stack exchange，提问作者Alex