文字排版的流动性需通过字号、行高、段距、容器宽度等变量协同缩放实现，核心是使用无单位line-height、rem字号、ch宽度及em间距，并在媒体查询中仅微调关键变量。
文字排版的流动性不是“让字号变小一点”，而是让字号、行高、段距、容器宽度这些变量彼此咬合，随根字号缩放时保持视觉节奏不变。做不到这点，再好的响应式布局也会在缩放或系统字体放大后崩掉阅读体验。
为什么 line-height 用无单位数值才真正“流动”
写 line-height: 1.6 是让行高成为当前 font-size 的 1.6 倍；而写 line-height: 24px 或 line-height: 150% 会切断这个比例关系——小屏下字号缩到 0.875rem（14px），24px 行高就显得空洞；大屏下字号涨到 1.5rem（24px），24px 行高又压得喘不过气。
line-height: normal 更不可靠：它依赖字体族和浏览器默认值，在不同设备上可能落在 1.0–1.2 之间浮动，无法保证一致疏密感。
- 根元素设
font-size: 100%（即默认 16px）作为基准起点 - 各级标题/正文统一用
rem控制字号，搭配无单位line-height - 避免在媒体查询里重写
line-height的像素值，只微调无单位数值（如小屏提至1.75）
max-width 和 padding 也要跟着字号“呼吸”
固定 width: 1200px 的文章容器在手机上必然撑破视口；而 max-width: 68ch 是按字符数限制阅读宽度，更符合人眼舒适区。同理，padding-inline: 1.5rem 比 padding: 24px 更合理——当用户放大系统字体时，留白会同步放大，视觉比例不塌。
- 段落间距优先用
margin-block: 1.5em，而非固定像素的margin-bottom -
ch单位比像素或百分比更适合控制阅读宽度，尤其对中英文混排友好 - 避免
padding或margin使用px，否则字号放大后空白会显得局促
媒体查询只该做“微调”，不是重写排版逻辑
真正的流式基础应在默认样式中完成，媒体查询只是根据内容密度做轻量优化。比如当段落明显变宽、单行字数超过 85 个汉字时，才通过 @media (min-width: 1024px) 把 max-width 从 68ch 放宽到 78ch；小屏下把 line-height 从 1.6 提到 1.75，提升可读性。
- 断点优先用
min-width，符合移动优先逻辑 - 只改关键变量：字号、行高、最大宽度、内边距；其余继承自基础流式规则
- 别在媒体查询里重新定义
font-size单位（如从rem切到em），会破坏比例链
最容易被忽略的是：图片、引用块、加粗文字这些非正文元素，尺寸和位置也得锚定在文字流里。否则字号一变，img 可能撑破容器，strong 里的字反而比正文还小——它们不是装饰，是排版节奏的一部分。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
