rem搭配根元素font-size是最轻量可控的字体比例尺方案，通过设置html{font-size:16px}定义基准，所有rem按此缩放，支持媒体查询和clamp()实现响应式，避免em嵌套混乱及第三方组件px覆盖问题。
直接用 rem 搭配根元素 font-size 就是最轻量、最可控的 HTML 字体比例尺方案，不需要框架、不依赖 JS，浏览器原生支持，且能和媒体查询、clamp() 无缝衔接。
怎么用 html 的 font-size 当比例基准
字体比例尺的本质是把一个可变的“1”定义清楚——这个“1”就是 html 元素的 font-size 值。所有 rem 单位都按它缩放，改一处，全站响应。
- 在 CSS 中写
html { font-size: 16px; }，此时1rem == 16px；想放大 25%，改成20px，所有1.5rem、2rem等自动等比变大 - 别在
body或其他容器上设font-size作为基准，它不影响rem计算，容易造成误判 - 如果用
%或em设置html的font-size（如font-size: 100%），它最终仍会解析为绝对像素值，但可能受用户浏览器默认字号或缩放影响，不如显式设px稳定
为什么不用 em 做全局比例尺
em 看似也能缩放，但它依赖父级，嵌套越深，计算越不可控。比如导航菜单里三级 ul > li > a 都用 em，某一层意外加了 font-size: 0.9em，下面所有文字就悄悄缩水一圈，排查成本高。
-
em适合局部弹性（如按钮内图标与文字对齐），不适合做整站比例系统 - 当组件被复用到不同父级环境时，
em表现不一致；rem始终只看html，行为确定 - CSS 变量（如
--base-size: 16px）虽灵活，但 IE 不支持，且不能直接用于font-size的计算上下文（需配合calc()），反而增加冗余
响应式比例尺：从 media query 到 clamp()
纯靠固定 html { font-size: 16px } 无法适配小屏阅读吃力、大屏字太小的问题。现代做法是让根字号本身响应视口变化。
- 用媒体查询分段调整：
@media (max-width: 480px) { html { font-size: 14px; } }，简单可靠，兼容性好 - 更平滑的方案是
clamp()：html { font-size: clamp(14px, 2.5vw, 20px); }，表示最小 14px、最大 20px、中间按视口宽度 2.5% 线性过渡；注意vw基准是视口宽度，不是容器宽度，别和em混用 - 慎用
vw单独设font-size（如font-size: 4vw），小屏下可能缩到 10px 以下，可读性崩坏，必须搭配min/max限制
实际项目中容易忽略的三个点
字体比例尺不是设完 html 就万事大吉，有三个细节常被跳过，导致效果打折或维护困难：
-
line-height必须用无单位数值（如1.5），而不是1.5rem或1.5em，否则会随字号缩放而叠加放大，行距失控 - 第三方组件（如 UI 库弹窗、日期选择器）可能自带
px字号，需额外覆盖其font-size并转为rem，否则比例尺断裂 - 用户系统级缩放（Windows 缩放 125%、macOS 显示器 HiDPI）会影响
px渲染，但rem基于浏览器计算，只要根字号设的是px，它依然稳定；若要完全跟随系统，可用html { font-size: 1rem; }+:root { font-size: clamp(...); }组合，但兼容性略降
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
