在移动端成为主流的今天，「一套页面适配多种设备」已经是前端的基本能力。
这篇文章是我系统学习**响应式布局（Responsive Web Design）**后的阶段性总结，涵盖：

• 响应式布局的核心思想
• 媒体查询的使用方式
• Bootstrap 框架与栅格系统
• 实战中的布局策略与技术选型

如果你正在从 PC 端迈向移动端，这篇文章会非常有帮助。

---

一、什么是响应式布局？

响应式布局的本质只有一句话：

根据不同屏幕尺寸，动态调整页面的布局和样式，让同一套 HTML 在不同设备上都有良好的显示效果。

常见适配设备包括：

• 手机
• 平板
• 笔记本
• 桌面显示器

响应式布局的核心技术是：CSS 媒体查询（Media Query） 。

---

二、响应式布局的核心原理

1. 设备尺寸的常见划分

在实际开发中，通常会按以下区间来划分设备宽度：

• 超小屏幕（手机）：小于 768px
• 小屏设备（平板）：768px ~ 991px
• 中等屏幕（桌面）：992px ~ 1199px
• 大屏设备（大屏显示器）：1200px 及以上

注意：
这些不是死规定，而是业界常用参考，实际项目可以按设计稿自行调整。

---

2. 响应式布局容器的思想

响应式页面通常会有一个最外层布局容器，用于控制整体宽度。

典型思路是：

• 小屏设备：容器宽度 100%
• 中屏设备：固定宽度（如 970px）
• 大屏设备：更大的固定宽度（如 1170px）

通过媒体查询，在不同屏幕下修改容器宽度，从而影响内部布局。

示例：

.container {
  width: 100%;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

---

三、响应式布局实战：导航栏案例思路

假设有一个导航栏，包含 8 个菜单项，需求如下：

• 屏幕 ≥ 800px：

  • 导航栏宽度 800px
  • 每个菜单项固定宽度，一行显示

• 屏幕 < 800px：

  • 导航栏宽度 100%
  • 每行显示 3 个菜单项，自动换行

实现关键点：

• 外层容器负责宽度变化
• 子元素通过百分比宽度适配
• 使用媒体查询切换布局规则

这种「一套结构，多套样式」的思想，是响应式布局的核心。

---

四、为什么要使用 Bootstrap？

1. Bootstrap 是什么？

Bootstrap 是由 Twitter 推出的前端开发框架，提供了一整套：

• 规范化的 CSS 样式
• 成熟的响应式布局方案
• 丰富的 UI 组件

可以把它理解为：
已经帮你写好的响应式解决方案集合。

---

2. 使用 Bootstrap 的好处

• 开发速度快
• 样式统一、规范
• 天然支持响应式布局
• 社区成熟，文档齐全

特别适合：

• 初学响应式布局
• 快速搭建页面
• 中后台或展示型项目

---

五、Bootstrap 栅格系统详解（重点）

1. 栅格系统的核心概念

Bootstrap 将页面横向划分为 12 等份，通过列数控制布局。

常见类前缀：

• .col-xs-*：超小屏（手机）
• .col-sm-*：小屏（平板）
• .col-md-*：中屏（桌面）
• .col-lg-*：大屏（大屏显示器）

示例：

<div class="row">
  <div class="col-md-4 col-sm-6">内容</div>
  <div class="col-md-8 col-sm-6">内容</div>
</div>

含义是：

• 中屏以上：4 + 8
• 小屏：6 + 6

---

2. 行（row）与列（column）

几点非常重要的规则：

• .row 用来包裹列
• .row 会抵消容器左右 15px 的 padding
• 每一列默认有左右 15px 内边距
• 一行的列数加起来不能超过 12

---

3. 列嵌套

列中可以继续使用 .row 和 .col-*，实现更复杂的布局：

<div class="col-sm-4">
  <div class="row">
    <div class="col-sm-6">小列</div>
    <div class="col-sm-6">小列</div>
  </div>
</div>

---

4. 列偏移与排序

偏移列：

<div class="col-md-4 col-md-offset-4"></div>

排序列：

<div class="col-md-4 col-md-push-8"></div>
<div class="col-md-8 col-md-pull-4"></div>

在不改 HTML 结构的情况下，就能调整显示顺序，非常适合响应式场景。

---

六、响应式工具类的使用

Bootstrap 提供了一些工具类，用于控制元素显示与隐藏：

• .hidden-xs
• .hidden-sm
• .hidden-md
• .hidden-lg

可以非常方便地为不同设备定制内容展示策略。

---

七、真实项目中的布局策略总结

在实际开发中，我总结出一套比较稳妥的流程：

1. 先写 PC 端（md 及以上）布局
2. 再针对小屏、超小屏做调整
3. 栅格系统优先，其次再写自定义样式
4. 不追求「完全一样」，而是「体验合理」

---

八、移动端布局方案对比

常见方案包括：

• 流式布局（百分比）
• Flex 弹性布局（推荐）
• rem 适配布局（推荐）
• 响应式布局（媒体查询）

实际项目中，往往是多种方案混合使用，而不是只选一种。

---

九、总结

响应式布局并不是某一个 CSS 属性，而是一整套设计思想：

• 一套 HTML
• 多套 CSS
• 根据设备动态切换布局规则

Bootstrap 帮我们降低了学习和使用门槛，但真正重要的，是理解：

屏幕变化 → 容器变化 → 子元素重新排列

理解了这一点，响应式布局就不再神秘了。