WinddSnow

CSS-Responsive-Design-and-Media-Queries

CSS 响应式设计 媒体查询 移动优先 容器查询
字数统计: 3.7k阅读时长: 15 min
2026/07/29

第30课：响应式设计与媒体查询——移动优先、断点、@media 与容器查询简介

响应式设计（Responsive Design）是让同一个网站或应用在不同屏幕尺寸、不同设备上都能提供良好体验的设计哲学。其核心支柱是媒体查询（Media Queries）——允许 CSS 根据视口宽度、设备特性等条件应用不同的样式。本节课将系统讲解移动优先策略、断点的选择与命名、@media 的完整语法与逻辑组合，以及现代响应式布局的新星——容器查询（Container Queries） 的基本原理。

1. 移动优先（Mobile First）策略

1.1 两种设计策略对比

策略 基础样式面向 媒体查询方向 优点 缺点
桌面优先 大屏幕（桌面） max-width 逐步降级小屏 历史习惯，大屏设计更“完整” 小屏加载大屏资源，代码臃肿，维护难
移动优先 小屏幕（手机） min-width 逐步增强大屏 性能更优，代码更简洁，移动优先策略 需转变思维，初期设计需克制

移动优先是当前业界推荐的主流策略。其核心原则：

  • 基础样式：针对最小屏幕（通常是 320px~375px 的手机竖屏）编写，不使用任何媒体查询。
  • 增强样式：使用 min-width 媒体查询，在屏幕宽度达到特定断点时叠加或覆盖样式。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* 基础样式：手机竖屏 */
.card {
  padding: 12px;
  font-size: 14px;
}

/* 平板及以上：>= 768px */
@media (min-width: 768px) {
  .card {
    padding: 20px;
    font-size: 16px;
  }
}

/* 桌面：>= 1024px */
@media (min-width: 1024px) {
  .card {
    padding: 24px;
    font-size: 18px;
  }
}

1.2 为什么移动优先？

  • 移动端用户占比高：全球超过一半的 Web 流量来自移动设备。
  • 性能优先：移动设备网络和 CPU 受限，基础样式仅包含最核心的样式，不加载不必要的增强。
  • 渐进增强：从核心体验开始，逐步叠加，符合 Web 的基本哲学。
  • 代码更简洁：min-width 的叠加逻辑比 max-width 的覆盖逻辑更清晰，减少不必要的重置。

2. 断点（Breakpoints）：选择与命名

2.1 常见断点参考

断点不应根据某个特定设备的宽度设定（因为设备不断更新），而应基于内容需要——当布局开始变得不协调时，设置断点。以下是业界常用的一组参考值：

断点名称 宽度条件 典型设备
xs < 576px 手机竖屏
sm >= 576px 手机横屏 / 小型平板
md >= 768px 平板竖屏
lg >= 992px 平板横屏 / 小型桌面
xl >= 1200px 桌面
xxl >= 1400px 大屏桌面

这些与 Bootstrap 5 的断点完全一致，可在团队中作为默认约定。

2.2 用 CSS 自定义属性管理断点（可选）

虽然 CSS 媒体查询不能直接使用变量，但预处理器或未来的 CSS 环境变量可以辅助管理。在纯 CSS 中，通常将断点值直接写在 @media 中，并通过注释标注：

1
2
3
4
5
6
/* 断点参考：
   sm: 576px
   md: 768px
   lg: 992px
   xl: 1200px
*/

也可以使用 @custom-media 规范（尚未被所有浏览器原生支持，需 PostCSS 插件），语法如 @custom-media --sm (min-width: 576px);，但目前不建议在生产中直接使用。

3. @media 语法与逻辑组合

3.1 基本语法

1
2
3
@media <media-type> and (<media-feature>) {
  /* CSS 规则 */
}
  • **media-type**：all（默认，所有设备）、screen（屏幕）、print（打印）、speech（屏幕阅读器）。
  • **media-feature**：最常见的是 min-width、max-width、orientation、prefers-color-scheme 等。
1
2
3
4
5
6
7
8
9
/* 仅屏幕设备，宽度 >= 768px */
@media screen and (min-width: 768px) {
  body { font-size: 16px; }
}

/* 打印样式 */
@media print {
  .no-print { display: none; }
}

3.2 逻辑运算符

运算符 说明 示例
and 逻辑与，所有条件必须满足。 @media (min-width: 768px) and (orientation: landscape)
, 逻辑或，任一条件满足即应用。 @media (max-width: 575px), (min-width: 1200px)
not 对整个媒体查询取反。 @media not screen and (min-width: 768px)
only 阻止老浏览器解析（已极少用）。 @media only screen and (min-width: 768px)

注意：not 必须放在媒体查询的开头，它对整个媒体查询语句取反，而不是单个条件。

1
2
3
4
/* 宽度 < 768px 时应用（因为 not 翻转了整个条件） */
@media not screen and (min-width: 768px) {
  /* 适用于宽度小于 768px 的所有设备和打印 */
}

更清晰的写法是直接用 max-width：

1
2
3
@media (max-width: 767px) {
  /* 宽度 < 768px */
}

3.3 区间范围的现代写法

CSS Media Queries Level 4 引入了区间语法，使用 <、<=、>、>= 直接比较，更加直观。

1
2
3
4
5
/* 传统写法 */
@media (min-width: 768px) and (max-width: 1199px) { }

/* 现代写法（Level 4，现代浏览器已广泛支持） */
@media (768px <= width <= 1199px) { }

优点：

  • 更接近自然语言的表达方式。
  • 避免使用 min- 和 max- 时的混淆。
  • 清晰表达闭合区间。

兼容性：Chrome 104+、Firefox 102+、Safari 16.4+ 均已支持。企业项目中需根据 browserslist 决定是否使用。

3.4 常见的媒体特性

除了宽度和高度，媒体查询还支持众多特性。

媒体特性 说明 示例
width / min-width / max-width 视口宽度。 (min-width: 768px)
height / min-height / max-height 视口高度。 (min-height: 600px)
orientation 设备方向：portrait（竖屏）或 landscape（横屏）。 (orientation: landscape)
prefers-color-scheme 系统主题：light、dark。 (prefers-color-scheme: dark)
prefers-reduced-motion 用户是否减少动画。 (prefers-reduced-motion: reduce)
resolution 设备像素密度（dpi / dpcm）。 (min-resolution: 2dppx)
hover 主输入设备是否支持悬停（hover / none）。 (hover: hover)

应用示例：暗色模式与减少动画偏好

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
:root {
  --bg: white;
  --text: #1a1a1a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a2e;
    --text: #e4e4e4;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

4. 视口 <meta> 与响应式的基石

第 2 课已简要介绍过视口元标签。这里再次强调：没有它，任何媒体查询都不会在移动端生效。

1
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • **width=device-width**：将布局视口宽度设置为设备的理想视口宽度（如 iPhone 14 为 390px）。
  • **initial-scale=1.0**：初始缩放比为 1:1。

若缺失此标签，移动端浏览器会使用默认的 980px 视口宽度，导致所有基于小屏的媒体查询失效，页面被缩小，文字如针尖。

5. 容器查询（Container Queries）简介

媒体查询基于视口改变样式，而容器查询基于父容器的尺寸改变样式。这对于构建可复用的响应式组件至关重要——同一个组件放在不同的容器中，样式自适应容器，而非整个页面。

5.1 定义容器

使用 container-type 声明一个元素为查询容器。

1
2
3
4
.card-wrapper {
  container-type: inline-size; /* 基于行内尺寸（宽度）的容器查询 */
  container-name: card;        /* 可选：命名容器，便于区分 */
}
  • inline-size：仅基于宽度查询（最常用）。
  • size：同时支持宽度和高度查询（使用较少）。
  • normal：默认值，不是查询容器。

5.2 容器查询语法

1
2
3
4
5
6
7
8
9
10
11
12
13
@container card (min-width: 400px) {
  .card {
    display: flex;
    flex-direction: row;
  }
}

@container (max-width: 399px) {
  .card {
    display: flex;
    flex-direction: column;
  }
}

当 .card-wrapper 的宽度 >= 400px 时，.card 变为水平布局；小于 400px 时，变为垂直堆叠。

5.3 容器查询 vs 媒体查询

对比维度 媒体查询 (@media) 容器查询 (@container)
参照系 视口（整个浏览器窗口） 父容器（元素的直接容器）
组件复用性 低——组件样式依赖全局视口宽度，难以独立复用。 高——组件样式仅依赖自身容器，任意放置均可自适应。
典型场景 页面整体布局、导航栏切换。 卡片布局、侧边栏中的列表、不同宽度的模块。
浏览器支持 所有浏览器。 现代浏览器（Chrome 105+、Safari 16+、Firefox 110+）。

5.4 容器查询综合示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<style>
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
  }
  .card-wrapper {
    container-type: inline-size;
    container-name: card;
  }
  .card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
  .card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
  .card .body { padding: 16px; }

  /* 容器宽度 >= 400px 时，图片和文字并排 */
  @container card (min-width: 400px) {
    .card {
      flex-direction: row;
    }
    .card img {
      width: 40%;
      aspect-ratio: 1;
    }
  }
</style>

<div class="grid">
  <div class="card-wrapper">
    <div class="card">
      <img src="https://via.placeholder.com/400x300" alt="">
      <div class="body"><h3>卡片 1</h3><p>描述文字</p></div>
    </div>
  </div>
  <div class="card-wrapper">
    <div class="card">
      <img src="https://via.placeholder.com/400x300" alt="">
      <div class="body"><h3>卡片 2</h3><p>描述文字</p></div>
    </div>
  </div>
</div>

课后练习

一、概念自测（选择题 / 填空题）

  1. （单选） 移动优先策略的核心是？
    A. 使用 max-width 降级桌面样式。
    B. 先编写大屏样式，再覆盖小屏。
    C. 基础样式面向小屏幕，用 min-width 逐步增强大屏。
    D. 所有样式都写在 @media (max-width: 640px) 中。

  2. （单选） 以下哪个媒体查询写法可以匹配宽度在 768px 到 1199px 之间的屏幕？
    A. @media (min-width: 768px) and (max-width: 1199px)
    B. @media (width >= 768px) and (width <= 1199px)
    C. @media (768px <= width <= 1199px)
    D. 以上均可。

  3. （填空） 要声明一个元素为容器查询的参照容器，应设置 CSS 属性 ______: inline-size;。

  4. （多选） 以下哪些是 CSS 媒体查询支持的逻辑运算符？
    A. and
    B. or
    C. not
    D. ,

二、AI 编程任务：编写面向 AI 的提示词

场景：实现一个响应式导航栏。要求如下：

  • 移动端（< 768px）显示汉堡菜单图标（☰），菜单项垂直堆叠隐藏，点击汉堡图标展开。
  • 平板及以上（>= 768px）菜单水平排列，隐藏汉堡图标。
  • 使用移动优先策略，基础样式为移动端，通过 min-width: 768px 增强。
  • 菜单展开/收起的交互使用纯 CSS 实现（通过隐藏的 <input type="checkbox"> 的 :checked 状态控制），无需 JavaScript。
  • 汉堡图标使用 Unicode 字符 ☰ 和 ✕ 切换。

任务要求：请写出一段完整的中文提示词，发送给 AI，使其生成符合上述要求的 HTML + CSS 代码。提示词中需明确指定移动优先的基础样式、min-width 媒体查询、以及纯 CSS 交互的实现方式。

三、Agent 模式下的提示词示例

你是一个资深前端开发 Agent。请构建一个纯 CSS 响应式导航栏组件，遵循移动优先策略。需要创建以下文件：

  1. index.html：包含导航栏的完整 HTML 结构。使用 <nav class="navbar">，内部包含一个 Logo 链接、一个隐藏的 <input type="checkbox" id="menu-toggle"> 作为汉堡菜单开关、一个 <label for="menu-toggle"> 显示 ☰/✕、以及一个 <ul class="nav-links"> 包含 4 个菜单项。
  2. styles/navbar.css：基础样式面向移动端（< 768px）：.nav-links 默认 display: none;，当 #menu-toggle:checked ~ .nav-links 时 display: flex; flex-direction: column;。使用 @media (min-width: 768px) 将 .nav-links 设为 display: flex; flex-direction: row;，并隐藏汉堡图标和复选框。添加平滑过渡动画。
  3. styles/global.css：引入盒模型重置、基础字体。
  4. 确保所有交互完全由 CSS 实现，注释解释关键选择器的作用。在 index.html 中正确引入 CSS 文件。

四、面试真题与参考答案

题目（字节跳动前端面试题）：

请解释响应式设计中“移动优先”策略的含义和优势。它与“桌面优先”策略有什么区别？在使用媒体查询时，min-width 和 max-width 的选用分别适用于哪种策略？

参考答案：

1. 含义与优势：
移动优先是指先针对移动设备的小屏幕编写基础样式，再通过 min-width 媒体查询为更大屏幕添加增强样式。优势包括：性能更优（移动设备仅加载最少的样式）、代码逻辑更清晰（叠加而非覆盖）、符合移动互联网发展趋势。

2. 与桌面优先的区别：
桌面优先先编写大屏的完整样式，再通过 max-width 为小屏降级或隐藏内容。这种方式容易导致移动端加载大量不必要的样式，且覆盖逻辑复杂，容易产生优先级冲突。

3. 媒体查询的选用：

  • 移动优先使用 min-width：例如 @media (min-width: 768px)，表示“当屏幕至少 768px 时，应用这些增强样式”。基础样式在小屏生效，大屏叠加。
  • 桌面优先使用 max-width：例如 @media (max-width: 767px)，表示“当屏幕不超过 767px 时，应用这些降级样式”。基础样式在大屏生效，小屏覆盖。
  • 区间范围可使用两者组合或现代语法 (768px <= width <= 1199px) 进行精确限定。

课后练习答案

一、概念自测答案

  1. C

    • 解析：移动优先的基础样式面向小屏，通过 min-width 增强。A 和 B 描述的是桌面优先。D 错误，基础样式不应写在媒体查询内。

  2. D

    • 解析：A 是传统写法，B 和 C 是 Media Queries Level 4 的新语法（注意 B 语法略有差异，实际标准为 width >= 768px 等，但现代浏览器均支持区间语法）。题目中 B 的写法虽不完全标准，但核心是 D 表示以上均可（因为 Level 4 语法在现代浏览器中可用）。

  3. container-type

    • 解析：container-type 是声明容器查询容器的属性，常用值 inline-size。

  4. A、C、D

    • 解析：and 表示与，, 表示或，not 表示非。不存在 or 关键字，应使用逗号。

二、AI 编程任务参考答案（提示词示例）

示例提示词：
“请实现一个响应式导航栏，纯 HTML + CSS，移动优先。要求：

  • HTML 使用隐藏的 <input type="checkbox" id="menu-toggle"> 和 <label for="menu-toggle"> 作为汉堡图标（显示 ‘☰’，选中后变为 ‘✕’）。
  • 基础样式（移动端，< 768px）：.nav-links 默认 display: none;，当 checkbox 选中时（#menu-toggle:checked ~ .nav-links）显示为 flex; flex-direction: column;。
  • 使用 @media (min-width: 768px) 将 .nav-links 设为 display: flex; flex-direction: row;，并隐藏 checkbox 和 label。
  • 菜单项背景、颜色、间距自行设计，确保美观。直接输出完整 HTML 文件。”

原文作者：WinddSnow

原文链接：https://winddsnow.github.io/2026/07/29/CSS-Responsive/

发表日期：July 29th 2026, 12:00:00 am

更新日期：July 28th 2026, 10:27:15 am

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. 第30课：响应式设计与媒体查询——移动优先、断点、@media 与容器查询简介
    1. 1.1. 1. 移动优先（Mobile First）策略
      1. 1.1.1. 1.1 两种设计策略对比
      2. 1.1.2. 1.2 为什么移动优先？
    2. 1.2. 2. 断点（Breakpoints）：选择与命名
      1. 1.2.1. 2.1 常见断点参考
      2. 1.2.2. 2.2 用 CSS 自定义属性管理断点（可选）
    3. 1.3. 3. @media 语法与逻辑组合
      1. 1.3.1. 3.1 基本语法
      2. 1.3.2. 3.2 逻辑运算符
      3. 1.3.3. 3.3 区间范围的现代写法
      4. 1.3.4. 3.4 常见的媒体特性
    4. 1.4. 4. 视口 <meta> 与响应式的基石
    5. 1.5. 5. 容器查询（Container Queries）简介
      1. 1.5.1. 5.1 定义容器
      2. 1.5.2. 5.2 容器查询语法
      3. 1.5.3. 5.3 容器查询 vs 媒体查询
      4. 1.5.4. 5.4 容器查询综合示例
    6. 1.6. 课后练习
      1. 1.6.1. 一、概念自测（选择题 / 填空题）
      2. 1.6.2. 二、AI 编程任务：编写面向 AI 的提示词
      3. 1.6.3. 三、Agent 模式下的提示词示例
      4. 1.6.4. 四、面试真题与参考答案
    7. 1.7. 课后练习答案
      1. 1.7.1. 一、概念自测答案
      2. 1.7.2. 二、AI 编程任务参考答案（提示词示例）
Total : 188
2026
2025
2024
2023
2022
2021
2020
2019
2018
1970
年终总结 碎语 HTML 可访问性 ARIA 键盘导航 屏幕阅读器 Angular 组件 模板语法 数据绑定 指令 管道 表单 模板驱动表单 响应式表单 验证器 Angular Material 主题定制 CDK 响应式布局 项目结构 NgModule 模块化 路由 导航守卫 惰性加载 Router RxJS Observable Subject 操作符 async管道 服务 依赖注入 @Injectable providedIn 注入器层级 React Ant Design ProTable ProForm 企业级组件 设计语言 ConfigProvider 国际化 Babel 编译 预设 polyfill browserslist CSS Bootstrap 导航栏 卡片 模态框 栅格系统 响应式 组件库 定制化 Sass 主题 animation keyframes 性能优化 will-change background border border-radius box-shadow outline 盒模型 box-sizing margin padding 自定义属性 var() 暗色模式 主题切换 display 布局 Flexbox 弹性布局 项目属性 flex-grow 容器属性 主轴与交叉轴 float clear BFC 字体 文本样式 font-face line-height Grid 网格布局 项目定位 grid-area fr单位 定位 position z-index fixed sticky 层叠上下文 选择器 属性选择器 伪类 权重 伪元素 Specificity important transform transition 动画 贝塞尔曲线 响应式设计 媒体查询 移动优先 容器查询 全栈实战 学习路线 项目架构 Vue ESLint Prettier 代码规范 Husky lint-staged Java ELK 分布式搜索引擎 elasticsearch Logstash kibana Element Plus Vue 3 表格 弹窗 消息提示 上传 按需引入 项目初始化 目录结构 Angular CLI TypeScript Vite AI辅助开发 Prompt工程 前端术语 缺陷描述 代码生成 代码修复 CommonJS ESM require import 测试 Jest 单元测试 组件测试 E2E Git Hooks commitlint 提交规范 conventional commits 最佳实践 Web标准 W3C WHATWG 代码验证 DOCTYPE 文档结构 标准模式 input label select textarea fieldset 表单验证 语义化 区块标签 SEO 原理 Head 元数据 Open Graph 图像 多媒体 srcset 响应式图片 多线程 超链接 导航 rel属性 JVM 42 基础 集合 并发 面试题 JavaScript 数组 Array方法 遍历 类数组 控制流 条件语句 循环 switch 数据类型 string number boolean 类型转换 Date Intl 时区 Temporal undefined symbol bigint object 错误处理 try-catch 调试 Source Map 事件循环 异步 宏任务 微任务 函数 箭头函数 参数 默认值 迭代器 生成器 Symbol.iterator yield JSON localStorage sessionStorage 数据存储 Map Set WeakMap WeakSet 原型链 prototype 继承 class ES Modules export 运算符 表达式 优先级 结合性 对象 属性描述符 Object方法 Proxy Reflect 元编程 作用域 闭包 词法环境 内存管理 严格模式 use strict 模块 字符串 模板字符串 正则表达式 RegExp 变量 var let const 提升 暂时性死区 数组基础 数据结构 WEB 数据库 MySql Mybatis Spring SpringBoot SpringCloud SpringMVC Dubbo Zookeeper MongoDB JWT token Kafka 列表 Markdown 掘金 Material UI MUI 主题系统 sx prop MySQL OpenClaw 微信 ClawBot 安装部署 聊天机器人 虚拟化 Proxmox VE yarn pnpm workspace 幽灵依赖 硬链接 npm 依赖管理 lock文件 workspaces Pinia 状态管理 Store State Getters Actions Context Provider useContext 性能 RabbitMQ 消息队列 自定义Hook 逻辑复用 useLocalStorage useDebounce JSX createElement 虚拟 DOM Fiber 事件处理 合成事件 this绑定 事件传参 插件 持久化 函数组件 Props children 组合 memo useMemo useCallback Code Splitting React.lazy Suspense 虚拟列表 React Router BrowserRouter Routes 嵌套路由 Outlet useNavigate 路由守卫 useState 批处理 不可变性 useEffect 副作用 生命周期 闭包陷阱 useReducer Reducer useRef forwardRef useImperativeHandle DOM操作 Redis 缓存 Redux Toolkit createSlice useSelector createAsyncThunk RTK Query Ribbon debug调试 spring springcloud 微服务 Tailwind CSS 组件化 样式复用 实用优先 配置 深色模式 文本标签 分享 类型系统 原始类型 any unknown never 工具类型 Partial Required Readonly Pick Omit Record Exclude Extract NonNullable Parameters ReturnType 访问修饰符 抽象类 implements 声明文件 ts types 全局声明 tsconfig 编译选项 环境配置 重载 this 函数类型 泛型 泛型函数 泛型接口 泛型约束 条件类型 infer 映射类型 组件类型 defineComponent PropType interface type 索引签名 声明合并 联合类型 交叉类型 类型收窄 字面量类型 构建工具 HMR esbuild 环境变量 代理配置 构建优化 代码分割 组件通信 defineProps defineEmits v-model 插槽 作用域插槽 动态组件 provide/inject Composition API setup computed watch watchEffect vim 编辑器之神 模板引用 onMounted nextTick v-once v-memo 异步组件 响应式原理 reactive ref 选项式 API 组合式 API mixins 迁移 Vue Router 4 动态路由 路由元信息 懒加载 过渡动画 类型安全 Webpack Loader Plugin css-loader babel-loader HtmlWebpackPlugin 打包工具 模块打包 SplitChunksPlugin 前端 Yapi 接口管理 Zustand 中间件 helloworld 保罗·格雷厄姆（Paul Graham） iframe 安全性 跨域通信 嵌入内容 数据库操作 nginx http服务器 高并发 计算机的世界
生活 前端基础 前端框架 前端工程化 课程总结 个人生活 编程中间件 前端工程化实践 编程 面试 工具用法 技术教程 计算机基础架构 读后感 指引 编程与数据库