响应式排版

排版的目标是让文字在不同宽度、缩放和语言下仍可读。限制行长、使用相对单位、允许文字换行并尊重用户字体设置，比为几个设备硬编码字号更可靠。

css

:root { font-size: 100%; }
h1 { font-size: clamp(2rem, 5vw, 4rem); }
article { max-inline-size: 65ch; line-height: 1.6; }

rem 让用户的根字体设置参与计算，ch 可近似控制阅读行长，clamp() 让标题在范围内变化。不能用 overflow: hidden 或极小字号掩盖长词、放大文本和不同语言带来的布局变化；中文、德文和阿拉伯文的断行需求也可能不同。

实验与练习

在浏览器放大页面到 200%，切换窄视口和不同语言文本，记录标题、段落和按钮是否仍可读可操作。用 max-inline-size、overflow-wrap 和合理行高修复问题，说明哪些规则解决的是文字本身，哪些解决的是容器。

在 200% 页面缩放、320px 视口和长德文/中文文本下记录标题、段落、按钮的可读性。只改变 max-inline-size、overflow-wrap 或 line-height 中一个属性，说明它解决的是行长、断词还是垂直节奏。

最后一篇把触摸精度、焦点和交互反馈加入响应式设计：触摸与交互适配。