rem并非天然更优，而是需配合动态设置html font-size才能实现等比缩放；若根字号未随视口变化，rem与px效果完全相同，且必须统一规划使用范围——字体/间距/容器用rem，border/box-shadow/图标等需像素精度的属性坚持用px，避免混用导致视觉跳变。
rem 在移动端不是“天然更优”，而是它能配合动态根字号实现等比缩放——前提是 html 的 font-size 必须随视口变化；否则写成 rem 和写成 px 效果完全一样。
rem 要生效，必须动态设置 html 的 font-size
浏览器不会因为用了 rem 就自动适配屏幕。它只认当前 document.documentElement.style.fontSize 的值。1rem 永远等于那个值，和设计稿、设备无关。
- 首次渲染前没设置，所有
rem都按浏览器默认16px计算，和px无异 -
resize事件里不更新，横竖屏切换后布局卡死（iOS Safari 甚至不触发resize，得额外监听orientationchange） - 用
calc(100vw / 375 * 16px)或媒体查询分段设font-size是可行的，但硬写html { font-size: 62.5% }只为换算方便，没解决响应问题
哪些地方必须坚持用 px，混用会出视觉跳变
不是所有属性都适合 rem。强行替换反而引入 sub-pixel 渲染偏差或逻辑断裂。
-
border: 1px：高 DPI 下本应物理清晰，写成0.0267rem难读易错，且模糊边框不符合设计预期 -
box-shadow: 0 2px 4px：模糊半径依赖像素采样，rem缩放会让虚化程度异常 -
background-position用于 sprite 图标：需像素对齐，rem导致偏移抖动 -
transform: scale()或canvas绘图：底层操作基于设备像素，rem会干扰坐标精度
真正麻烦的是单位混用，不是选哪个单位
写 padding: 1rem 却配 border: 1px + font-size: 1.2rem，三者缩放逻辑不一致。根字号一调，边界突然“跳变”，调试时根本没法归因。
-
line-height应该用无单位值（如line-height: 1.5），而不是line-height: 1.5rem——否则根字号调整时行高不会同比例变化 - 决定用
rem，就得从html { font-size }开始统一规划：字体、间距、容器宽高走rem，边框、阴影、图标尺寸走px - 用户开启系统“强制放大文本”或按
Ctrl + +放大网页时，rem值等比放大，px纹丝不动——混用会导致文字撑大但内边距不变，立刻溢出或挤压
最常被忽略的点是：单位选择不是孤立决策，而是整个样式体系的契约。改一个 font-size 就崩掉按钮圆角、图标对齐、阴影虚化，问题不在 rem 本身，而在没同步约束哪些地方绝不能用它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
