应只在媒体查询中设置 html 的 font-size，所有业务样式统一用 rem；配合 vw 主驱动与媒体查询限高限低，并重置 body 和正文字号以避免继承失控。
媒体查询里设 html font-size，别直接写 rem 值
很多人一上来就在 @media 里对 .box { width: 10rem; } 做条件判断，这是错的。rem 是相对单位，它只认 html { font-size } 的当前值；媒体查询本身不改变 rem 的换算基准，只负责“在什么条件下改根字号”。真正要动的是根元素，不是具体组件。
常见错误现象：@media (max-width: 480px) { .header { font-size: 1.2rem; } } —— 这里 1.2rem 仍按默认 16px 计算，缩放毫无意义。
- 正确做法：所有媒体查询只作用于
html标签的font-size - 所有业务样式（
width、padding、font-size等）统一用 rem，且不做媒体查询嵌套 - 断点数值需和设计稿逻辑宽度对齐，比如 375px 设计稿 →
@media (max-width: 375px)，而非凭感觉写 480px
vw + media query 双保险防极端缩放
纯 @media 设 html { font-size } 在超小屏（如 320px）或超大屏（如折叠屏 1200px+）容易失控：小屏下文字缩到 8px 不可读，大屏下按钮撑满半屏。只靠媒体查询兜不住边界。
推荐组合：html { font-size: 26.67vw; } 主驱动 + @media 限高限低。
- 计算公式：若设计稿宽 375px 对应 100px 根字号，则
100 / 375 × 100 = 26.67，即font-size: 26.67vw - 必须加兜底：
@media (max-width: 320px) { html { font-size: 85px; } }防 iOS 最小字号拦截 - 同样加顶：
@media (min-width: 768px) { html { font-size: 160px; } }防大屏爆炸 - 别用
calc(100vw / 3.75)—— Safari 和部分安卓 WebView 对 calc 中带除法的 vw 兼容差，会四舍五入丢精度
body 和正文字号必须单独重置
当你把 html { font-size } 拉到 100px，body 默认继承这个值，结果所有未显式设置 font-size 的段落、列表、按钮文字全变成 100px，根本没法读。
这不是 bug，是 rem 的正常行为。你得主动切断继承链。
- 给
body显式设font-size: 0.16rem;（假设根字号为 100px，0.16 × 100 = 16px） - 正文字号按设计稿比例换算：设计稿中正文是 24px（二倍图），则写
font-size: 0.24rem;，不是24px或1.5rem - 图标字体（如 iconfont）也得用 rem 控制，否则在不同设备上大小不一
- 慎用
em：它依赖父级字号，嵌套深了极易失真，全项目统一用 rem 更可控
缩放一致的关键不在“怎么写”，而在“谁来管根字号”
很多团队卡在“为什么换了 rem 还是缩放不稳”，问题往往出在根字号被多处覆盖：JS 动态设置、CSS 媒体查询、第三方库 reset.css 里的 html { font-size: 100% } 同时生效，最终谁赢谁输看 CSS 权重和执行顺序。
最稳的做法是：只留一个入口控制 html { font-size }，其他全部禁用。
- 删掉所有 JS 动态设置根字号的代码（除非你明确需要 resize 节奏控制）
- 检查全局 CSS，确保没有其他地方重设
html { font-size } - 避免用
!important强行覆盖，它会让后续调试变成黑盒 - 浏览器缩放（Ctrl + +/-）不影响 rem 计算，但会放大整个渲染层——这属于用户行为，你只需保证布局不因此坍缩或溢出即可
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
