一篇文章搞懂响应式布局：从媒体查询到 Bootstrap 栅格系统

掘金前端

作者 YukiMori23

2026年1月30日 09:54

在移动端成为主流的今天，「一套页面适配多种设备」已经是前端的基本能力。
这篇文章是我系统学习**响应式布局（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

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

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

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

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

八、移动端布局方案对比

常见方案包括：

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

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

九、总结

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

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

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

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

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

普通视图