px适合固定尺寸但非物理精确，rem依赖根字号实现可配置缩放，vw需防视口抖动；三者应按场景混用：布局用rem、装饰用px、全屏用vw/vh。
px 适合固定尺寸，但别误以为它“物理精确”
px 是最可控的单位，但它不是屏幕上的一个真实发光点。在 Retina 屏（dpr=2）上，1px 实际由 4 个物理像素渲染，视觉上会变粗——这就是为什么 border: 1px solid #ccc 在 iPhone 上看起来像 2px。
真正该用 px 的地方是那些「不该随环境变化」的细节：
- 图标容器宽高（如
width: 24px），缩放字体时不能跟着变 - 细边框、圆角、阴影偏移（
border-radius: 4px、box-shadow: 0 1px 3px） - CSS 动画中的关键帧位移（
transform: translateX(2px)），避免因 rem 计算抖动
别用 px 做布局宽度或文字大小——除非你明确拒绝响应式。
rem 本质是“可配置的 px”，根字号才是关键
rem 的值完全取决于 html 元素的 font-size。如果没手动设，就走浏览器默认（通常是 16px），那 1rem === 16px；但如果执行了 document.documentElement.style.fontSize = '10px'，那所有 rem 就立刻按新基准重算。
移动端适配中常见两种做法：
- JS 动态设置：根据
window.innerWidth或devicePixelRatio算出一个html字号（比如 375px 宽屏设为10px），后续1rem = 10px，方便设计师按 750px 设计稿除以 75 换算 - CSS 媒体查询 + :root：用
@media (max-width: 375px) { :root { font-size: 10px; } }，更轻量，但切换不及时
注意：不要在 html 上写 font-size: 62.5% 这类相对值——它继承自浏览器默认，不可控；直接写 font-size: 10px 更稳妥。
vw 单位要防“视口抖动”，尤其在移动端
1vw = 视口宽度的 1%，看似完美适配，但有个隐蔽陷阱：移动端 Safari/Chrome 地址栏收起时，window.innerWidth 不变，但 document.documentElement.clientWidth 和实际可视高度会变，导致 100vh 在页面滚动时“跳一下”。100vw 虽稳定些，但遇到横向滚动或 overflow-x: hidden 失效时也会错位。
安全用法有这些：
- 全屏背景图：
width: 100vw; height: 100vh;加position: fixed; top: 0; left: 0;避免文档流干扰 - 留白控制：
padding: 4vw;比用rem更贴合屏幕比例，但慎用于内联文本行高 - 配合
clamp()限制范围：font-size: clamp(14px, 4vw, 18px);防止小屏字太大、大屏字太小
别用 vw 做按钮宽高——它随窗口缩放实时变化，用户拖拽浏览器边框时 UI 会“呼吸”，体验极差。
三者混用时，优先级和边界必须清晰
没有银弹单位，只有合适场景。真实项目里往往是组合使用：
- 布局骨架用
rem（比如容器max-width: 75rem对应 750px 设计稿） - 视觉装饰用
px（分割线border-bottom: 1px solid #eee） - 全屏模块用
vw/vh（轮播图高度height: 60vh）
最容易被忽略的是单位切换的“临界点”：比如一个卡片用 rem 设宽，内部图标却用 px 固定，当根字号动态调整时，图标可能撑破卡片——这时要么统一单位，要么加 min-width 容错。单位本身没对错，错的是把它们当成互斥选项，而不是工具箱里的不同扳手。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
