08响应式设计

一套代码，适配手机、平板、电脑：媒体查询监听屏幕宽度， 不同宽度套用不同样式。移动优先是现代前端的默认姿势—— 这也是学习路线的最后一章，毕业快乐。

约 55 分钟 6 个动手实验 CSS 收官章

一、为什么需要响应式

2010 年以前，网页只需要伺候一种屏幕：电脑显示器。之后 iPhone 掀翻桌面—— 如今六成以上的流量来自手机。摆在面前的选择只有两条路：

响应式 vs 分开做
方案做法代价
分开做（老办法）www.x.com 给电脑，m.x.com 给手机两套代码两倍维护，链接容易跳丢
响应式（现标准）一套代码 + 媒体查询按宽度换样式需要学习本章——仅此而已

响应式的三块基石，本章各占一节：viewport 视口（第二节）、 @media 媒体查询（第三~五节）、弹性单位与布局（第六节）。 显隐控制和新兴的容器查询收尾。

一句话版本：响应式不是「为每种设备各设计一版」， 而是让同一版设计能屈能伸——先伸到最宽，再屈到最窄，都不断、都不丑。

二、viewport：一切的起点

每个响应式页面 head 里必须有这一行。没有它，手机会把页面当成 980px 宽的老式桌面页整体缩小塞进屏幕—— 用户看到的就是一张密密麻麻的缩略图，得靠双指放大才能读字。

同一部手机：左边「没写 viewport」（整页缩小），右边「写了」（正常排版）——把右框改成和左边一样的 min-height: 500px 感受区别
别用 user-scalable=no 禁止用户缩放——无障碍大忌， 视障用户依赖缩放读你的页面。视口标签只管「初始尺寸」，不管「剥夺自由」。

三、@media：媒体查询的完整语法

媒体查询 = 「如果条件成立，就应用花括号里的样式」。 条件由媒体类型和媒体特性组成，用逻辑词连接：

最核心的用法——按宽度切换网格列数：

真·响应式卡片——拖动编辑器宽度越宽列数越多（把断点从 400/700 改成 300/900 感受"换挡太早/太晚"）
移动优先用 min-width（从窄到宽逐步增强）； 反过来写 max-width 是「桌面优先」，老思路，不推荐——原因见第五节。

四、断点：在哪换挡

宽度条件里的那个数字叫断点（breakpoint）——布局在此「换挡」。 业界惯例基本收敛在这几档：

常用断点约定
档位宽度区间典型设备布局策略
手机< 768pxiPhone、安卓机单列、大按钮、抽屉菜单
平板768 ~ 1023pxiPad 竖屏两列、紧凑导航
电脑≥ 1024px笔记本、显示器多列、完整侧边栏
大屏≥ 1440px外接显示器限制内容最大宽度
同一套卡片在三个「设备画框」里各是一番天地——把手机框的列数也改成 2 列感受高度紧凑
断点由内容决定，不由设备决定：哪一档开始「太挤了 / 太空了」， 就在哪换挡。别为「iPhone 15 Pro 是 393pt」这种具体机型写断点——机型年年换，内容需求不变。

五、移动优先：从最小的开始写

移动优先：基础样式写给手机（最受限的环境，逼你写最核心的样式）， 再用 min-width 逐级增强到平板、电脑。 反过来（桌面优先）则要在小屏上一路做减法、覆盖——越写越乱。

窄时导航竖排（拇指友好），宽过 640px 自动横排——把 640px 改成 1200px 看它"一直竖着"
移动优先的隐藏福利：基础样式服务最受限的环境，天然逼你砍掉花架子—— 字号、间距、层级在 375px 宽里都成立的话，放大到 1440px 差不到哪去。

六、免媒体查询三板斧：让布局自己适应

很多时候根本不用写断点——弹性工具自己会适应。 优先级：能用弹性方案就不写 @media，断点越少维护越轻松。

免媒体查询三板斧
板斧自适应性例子
① 百分比 + max-width跟随父容器伸缩，永不溢出img { max-width: 100% }
② clamp()在上下限之间弹性变化font-size: clamp(18px, 5vw, 40px)
③ auto-fill + minmaxGrid 自动增减列数repeat(auto-fill, minmax(110px, 1fr))
（附）flex-wrap: wrap放不下自动换行标签流、卡片行
流式标题——拖动编辑器宽度，字号在 18px~40px 之间平滑变化（把 5vw 改成 8vw 感受更大落差）
零媒体查询的响应式网格——拖动编辑器宽度列数自己变（把 minmax 第二个值改成 auto 观察列宽差异）

图片是响应式的重头戏——省流量和不变形两手抓：

手机流量贵、网速飘。picture 让小屏只下载小图—— 响应式不只是「看起来对」，还要「加载得省」。

七、按断点显示隐藏，与容器查询

有些元素只在特定设备有意义（手机上的汉堡按钮、电脑上的侧边栏）， 用 display 按断点切换。注意切换的是 display（彻底移出布局），不是 visibility（还占着位）：

窄屏看到「手机版徽章」，宽过 700px 换成「电脑版徽章」（把断点 700px 改成 1000px 试试）

媒体查询的年轻亲戚容器查询 @container：不问「屏幕多宽」， 问「容器自己多宽」——组件不再依赖页面环境，放哪儿都能自适应：

鼠标悬停虚线框让它变宽——容器自己过 420px 时，卡片从 1 列跳成 3 列（把阈值 420px 改成 320px 找临界点）
什么时候用哪个：页面级布局用 @media（跟着视口走）， 组件内部布局用 @container（跟着容器走）。同一张卡片放进侧边栏和主内容区都好看——这就是容器查询的意义。

八、本章小结

响应式工具箱总表（按出场顺序）：

响应式工具箱总表
工具一句话关键写法
viewport 标签让手机按真实宽度排版<meta name="viewport" content="width=device-width, initial-scale=1.0">
@media条件成立才应用的样式块@media (min-width: 768px) { }
断点布局换挡的宽度数字768 / 1024（由内容决定）
移动优先基础样式给手机，min-width 增强@media (min-width: 768px)
百分比 / max-width跟随父容器伸缩img { max-width: 100% }
clamp()带上下限的弹性值clamp(18px, 5vw, 40px)
auto-fill + minmaxGrid 自动换列数repeat(auto-fill, minmax(110px, 1fr))
picture按屏幕加载不同图片<source media="(min-width: 768px)">
display 显隐按断点切换元素在场display: none / inline-block
@container按容器宽度响应（组件级）container-type: inline-size
  • 响应式 = 一套代码服务所有屏幕，基石是 viewport + @media + 弹性布局
  • 没有 viewport 标签，手机把页面当 980px 缩略——第一行检查它
  • 移动优先用 min-width 逐级增强；断点由内容决定，不由机型决定
  • 三板斧（百分比、clamp、auto-fill+minmax）能解决的就别写断点——断点越少越好维护
  • 显隐切换 display 而非 visibility；组件级响应式交给 @container
动手练习：①拖动学习路线主界面宽度，观察侧边栏、卡片何时换挡； ②把第三节演示的断点从 400/700 改成 300/900，感受「换挡太早 / 太晚」； ③给第六节网格的 minmax 第二个值改成 auto，观察列宽差异； ④把容器查询演示的阈值 420px 改成 320px，找到「一列直接变三列」的临界点。

九、路线终点：写在学习路线的最后

恭喜！HTML → CSS → 布局 → CSS3， 27 章的前端三件套学习路线到这里全部走完。从「标签是什么」到「容器查询怎么用」， 你已经具备了把一张设计稿变成真实页面的全部基础知识。接下来推荐三件事：

  • 实战：用本路线的知识仿写 2~3 个你喜欢的页面（个人主页、作品集、产品落地页）——临摹是最好的练习，卡住的地方就是下一轮学习的地图
  • JavaScript：让页面「动起来、响应用户」的编程语言，前四章的 HTML/CSS 正是它的舞台
  • 框架预习：Vue / React——先打好原生基础再上框架，你会感谢现在稳扎稳打的自己
查资料的姿势：遇到拿不准的属性，MDN 搜属性名看兼容性和正式定义， Can I Use 查浏览器支持率——本路线教的「查手册」习惯，比记住多少语法都值钱。
别忘了勾选「标记为已掌握」——27 章全部点亮时， 回学习路线主页看看自己的进度条。从第一行 <h1> 到今天的容器查询，这条路你是一步步走完的。 下一站，见。