px必须用于边框、阴影、图标尺寸等需物理像素精度的场景，因rem/vw缩放会导致视觉失真；如border:1px在高DPI下需配合scale或媒体查询适配，而非换算为rem。
px 什么时候必须用，而不是“能不用就不用”
px 不是过时单位，而是不可替代的精确控制工具。边框、阴影、图标尺寸、打印样式这些地方硬切 rem 或 vw 反而会出问题。
常见错误现象：border: 1px solid #ccc 在高 DPR 设备（如 iPhone）上被渲染成 2 物理像素粗，但用户期望的是视觉上一致的细线——这时你得配合 transform: scale(0.5) 或媒体查询做 DPR 适配，而不是换成 border: 0.05rem（根字号一变，边框就糊）。
- 固定像素级装饰：如
box-shadow的偏移和模糊值、outline、text-shadow - 图标/插图容器：SVG 内联图标用
width: 24px比width: 1.5rem更可控 - 系统级 UI 元素：表单控件的
height、line-height常需 px 对齐 baseline
rem 动态设置 font-size 的坑，90% 的项目都踩过
用 JS 动态改 document.documentElement.style.fontSize 是最常见也最容易翻车的做法。页面渲染流程里，CSSOM 构建早于 JS 执行，所以初始渲染用的是浏览器默认的 16px，等 JS 跑完才重排——这就是“文字先大后小”、“按钮跳动”的根源。
真正有效的规避方式不是加 setTimeout，而是把计算逻辑塞进 <script> 并放在 <head> 最顶部，且禁止异步加载。更稳的方案是放弃运行时 JS 计算，改用媒体查询静态定义：
立即学习“前端免费学习笔记（深入）”；
html { font-size: 16px; }
@media (min-width: 320px) { html { font-size: 16px; } }
@media (min-width: 375px) { html { font-size: 18.75px; } } /* 375 / 20 = 18.75 */
@media (min-width: 414px) { html { font-size: 20.7px; } }注意：不要设 font-size: 1px 这种极端值，iOS Safari 和部分安卓 WebView 有最小字号限制（通常 12px），低于它会被强制拉回。
vw 单位在 PC 端溢出和移动端字体过小的真实表现
100vw 在 PC 页面上等于视口宽度 + 滚动条宽度（约 17px），导致元素撑出容器，尤其在 flex 容器里容易破坏布局。这不是 bug，是规范行为——vw 基于 layout viewport，而滚动条属于 layout viewport 的一部分。
移动端字体用 font-size: 4vw 看似方便，但在 320px 宽屏上变成 12.8px，已接近可读下限；若用户开启系统“更大字体”辅助功能，vw 不响应，文字反而更小。
- 安全写法：
font-size: clamp(14px, 4vw, 18px)，用clamp()设上下限 - 容器宽度优先用
width: 100%或max-width: 100vw配合overflow-x: hidden防溢出 - 避免在
border、box-shadow里混用vw，缩放后视觉重量失衡
rem 和 vw 混用时，哪些地方绝对不能交给 rem
现代项目里，rem 和 vw 不是非此即彼，而是分工明确：前者管“比例体系”，后者管“空间响应”。但有些地方交出去就是灾难。
典型翻车点：border-width: 0.1rem —— 根字号一放大，边框就粗得像描边；box-shadow: 0 2px 4px rgba(0,0,0,0.1) 改成 0 0.125rem 0.25rem 后，在小屏上阴影几乎看不见，在大屏上又糊成一团。
- 所有装饰性尺寸：边框、圆角
border-radius、阴影偏移和模糊值，坚持用px - 行高
line-height别用rem，它应是无单位数值（如1.5），否则会随根字号缩放失真 - 内边距
padding和外边距margin可用rem，但要和字体层级对齐（比如padding: 0.75rem对应font-size: 1rem）
真正容易被忽略的是：vw 字体在系统强放大模式下完全不响应，而 rem 会跟着用户设置走——这个差异在政务、银行类 App 里直接决定是否合规。
