rem 失效主因是 html font-size 被覆盖，需检查 computed 值；断点混用 rem 易致字体跳变，建议小步过渡+clamp() 或 js 回退；响应式字体需同步调整 line-height 等相对单位，并配 font-display: swap 防闪烁。
rem 设置失效？检查根元素 font-size 是否被覆盖
很多情况下 rem 看起来“没反应”，不是单位用错了，而是 html 元素的 font-size 被后续样式或框架重置了。比如某些 ui 库（如 Ant Design）或 css Reset 会把 html 的 font-size 设为 10px 或直接设为 16px，导致你基于设计稿等比缩放的计算逻辑崩掉。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在开发者工具中直接选中
html元素，看 computed 栏里font-size最终值是多少，别只看 styles 面板里的声明 - 用
html { font-size: calc(100vw / 375 * 16); }这类动态表达式时，注意浏览器是否支持calc()在font-size中嵌套单位（IE 不支持，safari 旧版有 bug） - 避免在
html上写死font-size后又用 JS 动态改——CSS 和 JS 两头改容易打架，优先用 JS 控制，CSS 只做兜底
媒体查询断点和 rem 混用时，字体跳变明显怎么办
单纯靠 @media 切几档 html 的 font-size，在断点附近拖动窗口会看到字体突然放大或缩小，体验割裂。这不是 bug，是线性切换 + 浏览器渲染精度叠加的结果。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 断点别照搬设计稿宽度（如 375/768/1024），按设备实际 viewport 宽度分段，例如
@media (max-width: 480px)、@media (min-width: 481px) and (max-width: 768px) - 每档之间
font-size差值控制在 1–2px 内，比如从14px→15.5px→16px，而不是14px→18px - 加
transition: font-size 0.2s ease到html上（仅限现代浏览器），能缓解跳变感；但注意 Safari 对html元素 transition 支持不稳定，可改用body+transform: scale()替代方案
vw 实现流体字体时，ios Safari 字体最小值被限制
用 font-size: 4vw 这类写法在 iOS Safari 上可能卡在某个最小字号（比如 12px），尤其当 viewport 很窄时，文字不会继续缩小。这是 Safari 的主动保护机制，防止用户看不清内容。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须搭配
min-font-size（目前仅 Safari 技术预览版支持），所以更通用的做法是用clamp()：font-size: clamp(14px, 4vw, 18px); -
clamp()三个参数顺序不能错：最小值、首选值、最大值；其中首选值支持vw、rem，但不推荐混用单位（如clamp(14px, 2rem, 18px)会导致计算不可预期） - 旧版浏览器不支持
clamp()，可用 JS 回退：监听resize，读取document.documentElement.clientWidth，手动设置html.style.fontSize
字体响应策略上线后，按钮文字溢出或行高错乱
字体大小变了，但 line-height、padding、height 还是固定像素值，就会出现文字顶到上下边距、按钮高度塌陷、多行文本截断异常等问题。响应式字体不是只改 font-size 就完事。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有依赖字体尺寸的属性，尽量用相对单位：
line-height: 1.5（无单位）、padding: 0.75em 1em、min-height: 2.5em - 避免给文字容器设固定
height，改用min-height或flex布局自适应 - 用
em时注意继承链：如果父级font-size是动态的，子级em值会层层相乘，调试困难；关键组件内可统一用rem锚定根字体
最麻烦的其实是字体加载期间的闪烁和重排——font-display: swap 必须配，否则小屏下首次渲染可能用系统字体撑开布局，等 Web Font 加载完再收缩，触发二次 layout。这点容易被忽略，但影响首屏体验。