CSS 单位怎么选：PX、REM、VW、VH 与 calc() 实战
CSS 长度单位没有统一的“最佳选择”。固定边框适合 px，随根字号缩放的间距适合 rem，随视口变化的布局可用 vw、vh，混合约束则适合 calc()。关键是先明确参照物，再换算。
先看一个响应式卡片实例
.card {
width: min(92vw, 40rem);
padding: 1.5rem;
min-height: calc(100vh - 8rem);
border: 1px solid #d8d8d8;
}假设根字号是 16px、视口为 1440×900：40rem = 640px，92vw = 1324.8px，所以宽度取 640px；1.5rem = 24px；calc(100vh - 8rem) = 900px - 128px = 772px。
PX、REM 和 EM 的参照物
- px：CSS 像素，适合 1px 边框、图标细节等明确尺寸。
- rem：相对根元素字号。根字号为 16px 时，2rem 等于 32px，适合全局间距和可缩放排版。
- em：字号取决于当前元素的计算字号；用于其他属性时相对该元素字号。组件嵌套时可能累积，需要检查计算值。
百分比、VW、VH、vmin 和 vmax
百分比的参照物取决于具体属性，不能脱离属性直接断言。例如宽度百分比通常基于包含块宽度。1vw 等于视口宽度的 1%，1vh 等于视口高度的 1%；1vmin 取视口宽高中较小值的 1%，1vmax 取较大值的 1%。
移动端浏览器的地址栏会改变可见区域。需要贴合动态视口时，可进一步评估 dvh、svh 和 lvh，并在目标浏览器上测试。
calc() 如何计算混合单位
calc() 可以组合兼容的长度值。例如 calc(100vw - 2rem) 在 1440px 宽、根字号 16px 时为 1440 - 32 = 1408px。加减号两侧应保留空格；乘除法和较新的数学函数需要结合目标浏览器支持情况。
常见误区和限制
- 把 em 一律当成 rem：嵌套组件中二者的参照字号可能不同。
- 把 100vh 当成始终可见的手机屏幕高度：移动浏览器界面可能造成遮挡或跳动。
- 只做数值换算就判断布局正确：字体设置、包含块和属性语义都会影响最终计算值。
- 换算器中的百分比需要人为指定参照值；它无法自动知道真实页面的包含块。