合理设置font-size和line-height的相对值可实现响应式排版，结合CSS盒模型使文本在不同设备中自然缩放。通过百分比或em单位基于根字体调整大小，配合无单位line-height确保行距正确继承，避免使用固定高度，改用padding和min-height维持布局弹性。例如设置html { font-size: 100% }，再利用媒体查询适配小屏，同时为段落和按钮设置相对字体与行高，使内容区域随文字自适应，保证可读性与可访问性。关键在于让文本空间与盒模型协同响应变化。
在现代网页设计中，CSS盒模型与响应式字体的结合使用是实现高质量、自适应布局的关键。通过合理设置 font-size 和 line-height 的百分比值，不仅能提升可读性，还能让文本在不同设备上自然缩放，与盒模型协调工作。
理解CSS盒模型中的文本空间
每个HTML元素都遵循盒模型：内容（content）、内边距（padding）、边框（border）和外边距（margin）。当涉及文本时，font-size 决定文字大小，而 line-height 控制行间距，直接影响内容区域的高度。
若将 line-height 设为无单位数值（如 1.5），它会相对于当前 font-size 计算，这样在响应式场景下更灵活。例如：
p {
font-size: 1.2em;
line-height: 1.6; /* 实际行高 = 1.2em × 1.6 */
padding: 0.5em;
}
此时，段落的内容高度由字体和行高共同决定，padding 则在此基础上扩展，整体盒子高度自然适配。
立即学习“前端免费学习笔记（深入）”；
使用百分比实现响应式字体排版
将 font-size 设置为百分比，可以基于父元素或根元素（html）的字体大小进行缩放，便于全局控制。
常见做法是设置根字体大小：
html {
font-size: 100%; /* 通常为16px */
}
<p>h1 {
font-size: 200%; /<em> 相当于 32px </em>/
line-height: 1.2; /<em> 响应式行高 </em>/
}</p>当用户调整浏览器默认字体大小时，页面文本能等比缩放，提升可访问性。配合媒体查询，可进一步优化不同屏幕下的显示效果：
@media (max-width: 768px) {
html { font-size: 90%; }
}
@media (max-width: 480px) {
html { font-size: 80%; }
}
line-height 百分比 vs 无单位值的区别
注意：line-height 使用百分比时，是基于当前元素的 font-size 计算，但最终值继承给子元素时可能引发意外。
推荐使用无单位的数值（如 1.5），而不是百分比（如 150%），原因如下：
- 无单位值在继承时，子元素会根据自身 font-size 重新计算行高
- 百分比值一旦继承，子元素仍按父元素的 font-size 计算，可能导致行距错乱
body {
font-size: 16px;
line-height: 1.5; /* 推荐：子元素按自身字号调整行高 */
}
与盒模型协同优化布局
当字体大小随屏幕变化时，元素的 content 区域高度也会改变，影响整体盒模型尺寸。因此，避免使用固定高度（height），改用 padding 和 min-height 更安全。
例如一个响应式按钮：
.btn {
font-size: 120%;
line-height: 1.4;
padding: 0.6em 1em;
margin: 0.5em 0;
display: inline-block;
}
这样无论字体如何缩放，按钮内部垂直空间始终与文字匹配，不会出现文字被裁剪或留白过多的问题。
基本上就这些。掌握 font-size 和 line-height 的相对单位使用，再结合盒模型的弹性布局原则，就能构建出真正流畅的响应式排版系统。不复杂，但容易忽略细节。
