📏 rem / vw 响应式适配方案

移动端适配的核心目标是让设计稿在不同屏幕宽度的手机上等比显示。

方案一：rem + 动态根字体（经典方案）

原理：以设计稿宽度（通常 375px）为基准，动态设置 html { font-size }，页面元素用 rem 单位。

// ===== rem 适配方案（设计稿 375px 基准）=====
(function () {
  const BASE_WIDTH = 375;  // 设计稿宽度
  const BASE_FONT = 100;   // 基准 font-size（1rem = 100px）

  function setRem() {
    const scale = document.documentElement.clientWidth / BASE_WIDTH;
    document.documentElement.style.fontSize =
      Math.min(scale * BASE_FONT, BASE_FONT * 1.5) + 'px';
    // Math.min 限制最大字体，防止平板端过大
  }

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

  // 处理屏幕旋转
  window.addEventListener('orientationchange', () => {
    setTimeout(setRem, 100);
  });
})();

// 使用：设计稿 20px → 0.2rem（20 / 100）

方案二：vw 视口单位（现代方案，推荐）

原理：1vw = 屏幕宽度的 1%，直接用 vw 单位，无需 JS。

/* ===== vw 适配方案（设计稿 375px 基准）===== */
/* 换算公式：设计稿 px / 375 * 100 = vw */
/* 例：设计稿 20px → 20 / 375 * 100 ≈ 5.333vw */

/* 使用 CSS 自定义属性简化 */
:root {
  /* 以 375px 设计稿为基准 */
  --vw: calc(100vw / 375);
}

.element {
  width: calc(20 * var(--vw));   /* 设计稿 20px */
  height: calc(44 * var(--vw));  /* 设计稿 44px */
  font-size: calc(14 * var(--vw)); /* 设计稿 14px */
}

/* 限制最大宽度（平板场景） */
@media (min-width: 768px) {
  :root {
    --vw: calc(768px / 375); /* 768px 以上固定比例 */
  }
}

方案三：postcss-px-to-viewport（工程化方案）

在 Webpack/Vite 项目中使用 PostCSS 插件自动转换：

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-px-to-viewport-8-plugin': {
      viewportWidth: 375,   // 设计稿宽度
      unitPrecision: 5,     // vw 精度
      viewportUnit: 'vw',
      selectorBlackList: ['.ignore', '.hairlines'],
      minPixelValue: 1,
      mediaQuery: false,
      // 直接写 px，自动转 vw，无需手动计算
    }
  }
};
✅ 推荐选择
  • 小型项目：直接使用 vw + CSS 变量
  • 工程化项目：使用 postcss-px-to-viewport 插件
  • 需要兼容老旧设备：rem + JS 动态设置