rem不会自动响应屏幕尺寸，必须动态设置html根字号（如document.documentelement.style.fontsize = window.innerwidth / 10 + 'px'），并在domcontentloaded和resize事件中更新，否则无法实现等比缩放。
因为 rem 的缩放行为是可预测、可集中控制的——改一个 html { font-size }，所有 rem 值自动等比响应；而 px 是硬编码，em 会嵌套失控。
rem 的缩放逻辑为什么不会割裂界面
用户系统调大默认字体（比如从 16px 改成 20px），或按 Ctrl + + 放大网页时：
-
rem值等比放大：padding: 1rem、font-size: 1.5rem、border-radius: 0.5rem全部同步变大 -
px值纹丝不动：文字撑大了，但按钮内边距、圆角还卡在原尺寸，视觉立刻错位
典型错误现象包括：开启“强制放大文本”后按钮文字溢出容器、高 DPI 屏幕下 padding: 16px 看起来太紧、设计稿标 1000px 宽却在 iPad 上显得过小。
动态设置 html 的 font-size 怎么写才可靠
核心是让根字号与视口宽度成比例，常见公式：document.documentElement.style.fontSize = window.innerWidth / 10 + 'px'（即 1rem ≈ 视口宽的 1/10）
- 必须在
DOMContentLoaded和resize事件中更新，否则首次渲染错乱 - 加上防抖（如 100ms），防止频繁触发重排
- 移动端要监听
orientationchange，iOS Safari 横竖屏切换不触发resize - 别用
window.devicePixelRatio直接乘——它只影响渲染精度，不改变布局逻辑
哪些地方绝对不能用 rem，必须坚持 px
rem 适合控制整体节奏，但某些属性需要物理像素级精度：
-
border: 1px：高 DPI 下本应保持清晰，用0.0267rem既难读又易错 -
box-shadow的blur值：模糊程度依赖像素采样，rem 缩放会导致虚化异常 -
background-size中的图标 sprite 定位：需像素对齐，rem 引入 sub-pixel 渲染偏差 - 所有涉及
transform: scale()或canvas像素操作的场景
真正麻烦的不是换单位，而是混用：比如 padding: 1rem + border: 1px + font-size: 1.2rem，三者缩放逻辑不一致，调试时边界会突然“跳变”。决定用 rem，就得从根字号开始统一规划，而不是局部替换。
最常被忽略的一点是：rem 不会自动响应屏幕尺寸——它只认 html 的 font-size。如果这个值没动，哪怕全页面都写成 rem，也和写 px 没区别。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
