移动端适配只会用 px 真的够吗？这些 CSS 单位必须掌握

当开发者初次接触移动端适配时，很多人会习惯性地使用 px 单位进行布局。但随着设备屏幕尺寸的碎片化加剧，单纯依赖 px 单位已经难以满足现代响应式设计需求。本文将从实际开发场景出发，为你解析移动端适配必须掌握的 5 种 CSS 单位。

一、为什么 px 不再是万能选择？

物理像素与逻辑像素的差异是核心矛盾。在高密度屏幕（Retina 屏）设备上，1px 在 CSS 中可能对应 2到4 个物理像素点，直接导致元素显示尺寸不一致。例如在 Canvas 绘制场景中，开发者需要手动处理像素比：

canvas.width = canvasWidth  2; // 物理像素
canvas.style.width = `${canvasWidth}px`; // 逻辑像素

二、移动端适配的 5 大核心单位

1. rem：基于根字体的响应式单位

通过设置 html{font-size: 16px}，1rem=16px。配合媒体查询可实现阶梯式适配：

@media (min-width: 375px) {
  html { font-size: 18px; }
}

2. vw/vh：视口比例单位

1vw=视口宽度的1%，特别适合全屏元素布局。结合 calc() 可实现精确控制：

.banner {
  height: calc(100vh 60px);
}

3. rpx：小程序专用单位

在 Taro 框架中，默认将 px 转换为 rpx（1rpx=0.5px）。通过配置 pxtransformBlackList 可过滤第三方组件：

// config/index.js
plugins: [
  ['@tarojs/plugin-html', {
    pxtransformBlackList: [/adm-/] 
  }]
]

4. dvw/dvh：动态视口单位

解决了移动端浏览器地址栏显隐导致的布局跳动问题，是新一代适配方案的首选单位。

5. %：需要谨慎使用的单位

百分比单位的嵌套计算特性容易导致布局失控。例如父元素宽度为屏幕50%时，子元素50%宽度实际只有屏幕25%。

三、不同场景的单位选择策略

• 全局布局：优先使用 vw + rem 组合方案
• 组件开发：采用 px + 动态转换方案
• 特殊设备：使用 dvw/dvh 应对浏览器 UI 变化

四、实战避坑指南

1. 第三方组件适配：通过 PostCSS 插件过滤不需要转换的组件库
2. 1px 边框问题：使用 transform: scaleY(0.5) 实现物理级细边框
3. 图片适配：结合 srcset 属性实现分辨率适配

现代移动端适配早已不是简单的单位换算，需要开发者深入理解设备像素比、视口动态特性等底层原理。掌握这些核心单位的使用场景，配合 PostCSS 等现代化工具，才能真正实现「一次编写，多端适配」的开发目标。