HTML、CSS与可访问性 · KNOWLEDGE CHAPTER

K04

响应式与资源

响应式是让内容在变化的可用空间与资源条件下仍可用：视口会因缩放而变化，组件只获得父布局的一部分宽度，图片与字体又有自己的下载时机和固有尺寸。把“选择资源”“确定占位”“内部裁剪”“切换布局”拆开，才能解释为什么手机选了大图、字体切换后跳动或侧栏卡片挤坏。

HTML、CSS与可访问性2 道章节练习5 道主练关联

先修知识：K03 · 盒模型与布局

核心模型

原理与机制

图片候选由需求共同决定

srcset 的 w 描述符描述资源固有宽度，sizes 提供预计 CSS 展示宽度，浏览器结合像素密度等条件选取候选。sizes 不设置 CSS 宽度；实际半屏却写 100vw 会高估需求。固定尺寸也可使用 1x、2x 候选，但同一列表不混用 w 与 x。picture 的 media 用于艺术指导，例如窄屏换人物特写，type 用于格式选择，末尾 img 仍是实际图片元素。调试看 currentSrc、布局宽度、DPR 和冷缓存，缩小窗口后沿用已下载大图并不必然错误。

尺寸预留先于内容适配

图片的 width、height 可在下载前给出比例，aspect-ratio 为盒子提供首选比例，需至少一轴能自动推导，不能无视双轴固定尺寸和 min/max。object-fit 只决定内容怎样放进已确定的盒：cover 保比例填满但裁剪，contain 完整展示但留白，fill 可能变形；object-position 调整对齐焦点。auto 16/9 在获得固有比例后可改用真实比例，仍可能改变高度。固定裁剪卡片宜让外层维持比例，内图填满；证件、图表则要保留信息。

断点依赖真实空间，而非设备标签

400% 桌面缩放可能让 CSS 视口接近 320px，固定宽度、不换行标题和固定高度会暴露问题。使用流式宽度、合理上限、可换行布局，字号以 rem 等方式尊重用户设置，纯 vw 可能抵消文字放大。确需二维关系的表格可局部横向滚动，其他正文不应被迫双向滚动；检查滚动区可聚焦、可命名、可用键盘到达最右列。断点应由内容何时失效决定，并测试长翻译、系统大字体和横屏。

容器查询让组件适配分配到的空间

视口媒体查询看不到卡片被放在 240px 侧栏还是宽主栏。祖先设置 container-type:inline-size 后，后代可按容器内联尺寸查询；外部布局提供容器尺寸，避免内容与查询彼此决定尺寸。size 还约束块轴，不能与 inline-size 任意互换。同名祖先中先选择最近合格容器再判断条件，条件不成立不会继续寻找更远、更宽的同名容器。用明确名称隔离不同职责，基础样式可用后再渐进增强。

字体交换也是布局事件

font-display:swap 尽早显示回退字体，但换成下载字体时字宽、基线和换行仍可变化。可选择度量接近的回退字体，用 size-adjust 与 ascent/descent/line-gap 覆盖校准，同时让按钮和段落有内容弹性。optional 限制后续切换机会，可能让部分用户持续看到回退字体，这是可读性、稳定性和品牌之间的选择。只预加载真正首屏关键字体，并匹配 URL 与跨域设置；中文字体尤其要考虑文件体积和合理子集。

最小示例

html

<img src="card-800.jpg"
  srcset="card-400.jpg 400w, card-800.jpg 800w, card-1200.jpg 1200w"
  sizes="(min-width: 48rem) 50vw, 100vw"
  width="1200" height="800" alt="山间步道">
<style>
  img { display:block; width:100%; height:auto; }
  .slot { container: card / inline-size; }
  .card { display:grid; gap:1rem; }
  @container card (inline-size > 30rem) {
    .card { grid-template-columns: 1fr 1fr; }
  }
</style>

图片文件名是教学占位，须换成同构图且尺寸准确的本地资源。sizes 假定桌面真实布局为半视口，否则需同步修改。分别用 DPR=1 与 DPR=3、冷缓存观察 currentSrc，不要求每次缩窗都下载新图；把同一 card 放进不同宽度 slot，布局由最近容器而非整个视口决定。

环境：支持本章相关特性的现代浏览器；CSS 片段需配合说明中的最小 HTML。

核验：未执行教学示例；说明中的结果为机制推演，不是本轮测试通过记录。

边界与取舍

边界

sizes 与 object-fit 都不直接决定外层占位；选对资源不代表布局稳定。
宽高同时固定时，aspect-ratio 通常不能替你重算尺寸；cover 也可能裁掉重要内容。
支持容器尺寸查询不代表样式或滚动状态查询全部可用；预加载全部字体会争抢带宽。

取舍

高 DPR 候选提升清晰度，也增加传输和解码成本；应按实际展示尺寸提供合理候选。
swap 有利于快显示文字，optional 更少发生迟到替换；字体品牌一致性与布局稳定需要明确优先级。

口述示范

我会分别检查可用 CSS 空间、资源候选、图片占位与字体度量。组件布局用合适容器查询，页面重排按缩放和长内容测试；资源选择以 currentSrc 和实际尺寸核实，不能仅凭“手机下了大图”就判断失败。

章节练习

练习 1

假设为 CSSLab 做同一卡片在主栏、侧栏和 400% 缩放下的对照。

展开检查点

容器大小由外层决定；查询作用于后代，并检查最近同名容器规则。
长网址可换行、正文不双向滚动；表格局部滚动仍可键盘访问。

一张头像拉伸，慢网出现跳动，字体切换又改变按钮宽度，怎样拆分修复？