🎯 使用 rem 适配 PC 与移动端——原理与实战指南

一、核心原理

rem 单位基于根元素（<html>）的 font-size。
修改 html 的 font-size，页面上所有以 rem 为单位的样式都会动态调整。
示例：若 html { font-size:16px; }，则 1rem = 16px；若设为 32px，则 1rem = 32px。

二、方案概览：flexible.js + postcss-pxtorem

方案特点

开发阶段使用 px 编写，贴合设计稿；
构建阶段自动转换，PostCSS 插件将 px => rem；
运行阶段动态赋值，根据窗口宽度设置 html 的 font-size，实现视觉适配。

三、实现细节

1. flexible.js：动态设定根字体

(function(window, document) {
  const docEl = document.documentElement;
  const breakpoints = [
    { min: 0,    max: 480 },
    { min: 481,  max: 767 },
    { min: 768,  max: 1023 },
    { min: 1024, max: 1279 },
    { min: 1280, max: 1919 },
    { min: 1920, max: Infinity }
  ];
  const remBase = 100;

  function setRemUnit() {
    const w = docEl.clientWidth;
    let rem;

    for (const bp of breakpoints) {
      if (w >= bp.min && w <= bp.max) {
        rem = bp.max === Infinity
          ? remBase
          : remBase + remBase * (w - bp.min) / (bp.max - bp.min);
        break;
      }
    }
    if (rem == null) {
      const bp0 = breakpoints[0];
      rem = remBase * (w - bp0.min) / (bp0.max - bp0.min);
    }

    docEl.style.fontSize = rem + 'px';
  }

  setRemUnit();
  window.addEventListener('resize', setRemUnit);
  window.addEventListener('pageshow', e => e.persisted && setRemUnit());
})(window, document);

根据视口宽度分段设置根字体；
常与 main.js 配合加载；
实现不同屏幕下 1rem 的像素值平滑变化。

2. postcss-pxtorem 插件：构建阶段自动转换

安装（建议锁定版本）：

npm uninstall postcss-pxtorem
npm install postcss-pxtorem@5.1.1 --save-dev

配置示例（以 Vite 为例）：

import postCssPxToRem from 'postcss-pxtorem';

export default defineConfig({
  css: {
    postcss: {
      plugins: [
        postCssPxToRem({
          rootValue: 192,   // 1920 设计稿下，1rem = 192px
          propList: ['*'],  // 所有 px 属性均转换
        })
      ]
    }
  }
});

rootValue：用于计算 1rem = rootValue px；
propList：控制需转换的属性，['*'] 表示全部；
行内样式中的 px 默认不转换；
可通过写 1Px 或 2PX 忽略单个样式转换。

四、完整流程

阶段	工具	作用说明
开发阶段	`px` 编写样式	保持设计稿一致，易于计算
构建阶段	postcss-pxtorem 插件	自动将 CSS 中所有 `px` 转为 `rem`
运行时	flexible.js	实时调整根字体，驱动响应式布局

这样就实现了“一套代码，适配多端”设计理念。

五、最佳实践与注意事项

rem 是相对单位，不是响应式手段。它可根据根字体变化进行缩放，但不替代流式布局或百分比响应。
62.5% 方式谨慎使用：将 html 的字体设为 62.5%（即 10px），虽然简化了 rem 换算，但可能干扰用户预设习惯，不推荐。
合理设置断点与基准尺寸：flexible.js 的分段与 postcss-pxtorem 的 rootValue 应匹配规划，以维护视觉一致性。
避免在边框、阴影等视觉细节上使用 rem：推荐使用 px，以保证元素样式的一致性和细腻度。
行内样式需额外处理：PostCSS 插件不作用于行内样式或 JS 动态样式，需手动替换或通过 JS 方式计算转换。