移动端适配方案：rem 与 vw 的原理

前言

在移动端 H5 开发中，如何让页面在不同屏幕尺寸下等比缩放是一个核心问题。本文将详细介绍 rem 和 vw 两种主流适配方案的原理与实践。

一、Tailwind CSS 默认单位

在 Tailwind CSS 中，1 单位 = 0.25rem = 4px（假设根字体大小为默认的 16px）。

间距比例对照表

计算公式：实际像素值 = Tailwind 数值 × 4px

二、rem 适配方案

核心原理

rem 是相对于根元素（html）字体大小的单位。通过动态设置根字体大小，可以实现元素的等比缩放。

实现步骤

第一步：Tailwind 配置生成 rem

// tailwind.config.js
function pxToRem(value) {
  return `${value / 50}rem`;  // 50 是基准值
}

module.exports = {
  theme: {
    extend: {
      width: {
        'cui-100': pxToRem(100),  // → '2rem'
      }
    }
  }
}

第二步：JS 动态设置根字体

function setRootFontSize() {
  const designWidth = 750;  // 设计稿宽度
  const baseFontSize = 50;  // 基准值
  
  const screenWidth = document.documentElement.clientWidth;
  const fontSize = (screenWidth / designWidth) * baseFontSize;
  
  document.documentElement.style.fontSize = fontSize + 'px';
}

setRootFontSize();
window.addEventListener('resize', setRootFontSize);

核心公式

设计稿宽度 ÷ 基准值 = 屏幕宽度 ÷ 根字体

这个公式保证了设计稿和屏幕被分成相同的份数，元素占几份就是几份，比例永远一致。

计算示例（750 设计稿，基准 50）

基准值选择

三、vw 适配方案

核心原理

1vw = 屏幕宽度的 1%，纯 CSS 方案，不需要 JS。

转换公式

function pxToVw(value) {
  return `${(value / 750) * 100}vw`;  // 750 设计稿
}

// 或 375 设计稿
function pxToVw(value) {
  return `${(value / 375) * 100}vw`;
}

计算示例（750 设计稿）

vw 的问题：大屏幕过大

需要加最大宽度限制：

.container {
  width: 13.33vw;
  max-width: 100px;  /* 限制最大值 */
}

四、rem vs vw 对比

五、设计稿尺寸选择

375 vs 750

推荐：新项目用 375，数值与真实设备一致，不用换算。

六、实践建议

场景选择

• 纯移动端 H5 → vw（更简单，不需要 JS）
• 需要兼容老设备 → rem
• 移动端 + PC 响应式 → vw + max-width 限制
• 不想手算 → postcss-px-to-viewport 自动转换

PostCSS 自动转换

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 750,  // 设计稿宽度
    }
  }
}

写代码时直接写 px，自动转换成 vw。

总结

• rem：通过动态根字体实现缩放，需要 JS 配合
• vw：纯 CSS 方案，更现代，推荐使用
• 设计稿：推荐 375，与设备逻辑像素一致
• 核心思想：把设计稿和屏幕分成相同份数，保持比例一致