3.6 响应式设计：一套图纸适配所有屏幕

3.6 响应式设计：一套图纸适配所有屏幕

本节摘要：响应式设计让同一份页面在手机、平板、桌面都保持体面：媒体查询按视口特征切换排版，相对单位让尺寸随容器伸缩，流式图片防溢出。本节讲移动优先的书写策略、断点的选择依据（内容而非设备型号）、容器查询这一新工具，最后做看板的全尺寸验收，样式班正式交班。

一套图纸的压力测试

样式班收尾前，把看板拉到不同宽度上做压力测试：桌面显示器上一切体面；缩到平板宽度，侧栏开始挤压主体；再缩到手机宽度，统计卡片溢出画布，表格横向滚动，页头厂名折成三行。同一套结构、同一份样式，在不同画布上判若两页——这就是响应式设计要解决的问题：不维护多套页面，而是让一套图纸自己适应画布。

图 1：看板的断点与各档排版

图里三档排版的差异全部由媒体查询驱动：同一份结构，样式在不同宽度区间里各有各的版面。注意各档的差别是"结构性的少、数值性的多"——卡片从两列变一列是布局参数变化，内容与语义原样不动，这正是响应式与维护两套页面的本质区别。

移动优先的书写策略

响应式样式有两种写法：桌面优先（默认写桌面版，窄屏媒体查询做减法）与移动优先（默认写窄屏版，宽屏媒体查询做加法）。移动优先是更稳的选择：窄屏是约束最紧的环境，在约束最紧处把基础写扎实，放宽画布只是逐步增强；反过来从宽松处起笔，减法常常减不干净，窄屏总在"打补丁"。

/* 看板的移动优先实现 */
.stat-row { flex-direction: column; }   /* 基础（窄屏）：卡片纵排 */
.stat-card { width: 100%; }

.table-wrap { overflow-x: auto; }
/* 基础（窄屏）：表格外包一层滚动容器，数据列多时横滚而不是挤爆 */

.board-layout { grid-template-columns: 1fr; grid-template-areas: "header" "main" "aside" "footer"; }
/* 基础（窄屏）：版面单列，侧栏并入主流之后 */

@media (min-width: 48em) {
  /* 中档断点：约七百像素以上 */
  .stat-row { flex-direction: row; }      /* 卡片横排 */
  .stat-card { flex: 1 1 180px; }
}

@media (min-width: 64em) {
  /* 宽档断点：约一千像素以上 */
  .board-layout {
    grid-template-columns: 1fr 280px;
    grid-template-areas: "header header" "main aside" "footer footer";
    /* 版面升两列：主体加侧栏 */
  }
  .page { max-width: 72rem; margin-inline: auto; }
  /* 限宽容器：超宽屏上内容不无限拉伸，阅读行长可控 */
}
​

/* 相对单位三件套：让尺寸自己伸缩 */
h1 { font-size: clamp(1.4rem, 4vw, 2rem); }
/* clamp 夹取：最小一点四、随视口百分之四浮动、最大二——
   手机不小于下限，超宽屏不超过上限，中间自适应 */

.workshop-photo img { max-width: 100%; height: auto; }
/* 流式图片：宽度不超容器、高度按比例——永不溢出画布 */

.stat-card { padding: clamp(0.75rem, 2vw, 1.5rem); }
/* 内边距也随画布伸缩：窄屏紧凑、宽屏舒展 */
​

断点选哪里：内容说了算

断点的选择依据常常被误解为"按流行设备型号列清单"——那样清单永远追不上新机型。正确做法是内容驱动：把视口从窄拉到宽，观察页面在哪几个宽度上"开始难看"，那些难看的临界宽度就是断点。看板拉出来两个：卡片挤到贴边是一个，主体被侧栏压窄是一个。别人家的断点可以参考，自己家的断点永远以自己的内容为准。

断点数量也有节制：每加一个断点，所有后续维护都要多照顾一档版面。看板两档够用，内容复杂的页面三档封顶；再多的"开始难看"，多半说明版面本身该简化，而不是断点该加密。

/* 断点之上的进阶工具：容器查询 */
@container (min-width: 30em) {
  /* 容器查询：不看视口宽度，看容器自身宽度 */
  .stat-card { flex-direction: row; align-items: baseline; }
  /* 同一张卡片：容器宽时数字与标签横排，容器窄时纵排 */
}
.stat-row { container-type: inline-size; }
/* 容器声明：告诉浏览器以此盒子宽度为查询基准 */
​

容器查询与媒体查询的分工：
- 媒体查询问浏览器窗口：页面级版面切换用它
- 容器查询问组件自己：组件要在任何位置都体面，用它
- 看板场景：整车版面用媒体查询，卡片内部用容器查询
- 组件库时代的主流答案：组件自适应靠容器，页面骨架靠视口
​

样式班交班验收

再补一条容易被忽略的输出端：打印。看板偶有打印出来贴在车间墙上的需求，打印样式用专门的媒体类型写——去掉背景色省墨、补上表格边框、藏起按钮等交互件，一张纸上的可读性比屏幕上的炫技重要。响应式的完整含义由此再扩一圈："同一份内容，在任何输出媒介上都体面"，屏幕、窄屏、纸面都算它的辖区。

全尺寸验收清单：手机宽度卡片纵排不溢出、表格横滚可查全列；平板宽度三卡一行、侧栏不挤压主体；桌面宽度两列版面、限宽容器生效；任何档位字号不小于下限、按钮点击面积足够。逐项过后，样式班办理交班：向行为班移交完整版面与全部类名挂点（状态徽章的换装通道已由过渡铺好），向工程环节移交加载清单（样式表、字体、图片的体积与优先级，第 5 章性能优化接管）。

⚠️ 常见坑：只在自己那台显示器上做验收。开发者的显示器普遍偏宽，而相当比例的访问发生在手机上。开发者工具的设备模拟是最便宜的保命手段：每次交付前至少把最窄档拉一遍。

💡 关键直觉：把响应式理解为"一套内容、多套排布"，而不是"多套页面"。结构班交付的元素树从头到尾没变过，变的只是它在不同画布上的摆法——这正是三班分工制度的又一次兑现。

本节要点回顾

• 移动优先：基础样式写在最窄处，宽屏媒体查询做加法，减法思维容易留补丁；
• 内容驱动断点：从窄拉宽找"开始难看"的临界点，不追设备型号清单；
• 相对单位：夹取函数管字号、流式图片防溢出、内边距随画布伸缩；
• 表格窄屏：外包横滚容器，保数据可查而非硬挤；
• 容器查询：组件级自适应问组件自身宽度，与页面级媒体查询分工；
• 交班清单：全档验收加挂点移交，样式班收工。

装修班收工，行为班进场。下一章给看板接电：变量、函数、文档操作、事件与异步，让页面真正动起来。