最佳移动端适配方案—REM移动端适配方案移动端适配最常用的方案就是使用rem。下面介绍经过配置，我们只需要按照设计稿

移动端适配方案

移动端适配最常用的方案就是使用rem。
下面介绍经过配置，我们只需要按照设计稿（例如750px宽度的页面）的px正常开发。通过postcss-px2rem自动帮我们转换成rem。完全不影响开发体验的情况下，完成移动端的适配。

什么是 REM？

REM（Root Em）是相对于 HTML 根元素字体大小的单位。浏览器会根据根元素的 font-size 动态调整 REM 单位的换算值。
例如：

假设根元素 font-size 为 16px（浏览器默认字体大小就是16px），那么：
- 1rem = 16px
- 2rem = 32px

通过改变根元素的字体大小，页面上的所有使用 REM 单位的样式会同步进行比例缩放，这使 REM 成为适配移动端屏幕的绝佳工具。

使用 `postcss-px2rem` 实现适配（vue3 + vite项目为例）

1. 安装依赖

postcss-px2rem 是一个 PostCSS 插件，可以将 CSS 中的 px 单位自动转换为 rem 单位。

npm install postcss-px2rem --save-dev

yarn add postcss-px2rem --save-dev

2. vite 配置 postcss-pxtorem 插件

vite.config.ts

// vite.config.ts
import postCssPxToRem from 'postcss-pxtorem';

export default {
    css: {
      postcss: {
        plugins: [
          postCssPxToRem({
            rootValue: 100, // 1rem等于多少px
            propList: ['*'],
            exclude: /node_modules/i,
            // 排除该class
            selectorBlackList: ['.van-nav-bar--fixed', '.noRem'],
          }),
        ],
      },
    }
},

通过vite -plugin-html插件注入style

// vite.config.ts
import { createHtmlPlugin } from 'vite-plugin-html';

export default {
  plugins: [
    createHtmlPlugin({
      minify: true,
      inject: {
        injectHead: [
          `<style>
            html { font-size: calc(100vw / 7.50); }
          </style>`
        ]
      }
    })
  ]
}

或者 直接设置 public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vite App</title>
  <style>
    /* 设置根元素字体大小，基于屏幕宽度（替代了 lib-flexible 这个库的作用） */
    html {
      font-size: calc(100vw / 7.50);
    }
  </style>
</head>
<body>
  <div id="app"></div>
</body>
</html>

3.为什么选择 `7.50`？

`postcss-px2rem` 适配逻辑

postcss-px2rem 的 rootValue 设置为 100，意味着所有的 px 转换成 rem 时，采用 100px = 1rem 的比例。
在375px屏幕下：
375px / 7.5 = 50px，此时 html 根元素的 font-size 为 50px，因此 1rem = 50px。
在750px屏幕下：
750px / 7.5 = 100px，此时 html 根元素的 font-size 为 100px，因此 1rem = 100px。
无论在任何屏幕下，生成的 rem 都是按照 1rem = 100px 的比例进行转换。例如，设计稿中 100px 的元素，转换后为 1rem，无论是在 375px 还是 750px 屏幕上。
这种方式方便开发人员在屏幕上直接换算 px，比如 1rem * 100 = 100px，轻松实现适配。

注意：（关于如何方便开发调试）

因为实际在 Chrome开发者工具 中打开移动端模式时，通常使用 375px 的宽度来查看页面。
通过上面的设置，在 375px 屏幕下如果需要手动调整一下页面样式。
例如：之前在 750px 设计稿 中是 16px，需要加 2 个像素。想看效果，就直接在浏览器中将 0.16rem 改为 0.18rem。
由于做了适配，所以效果在两个屏幕上是一致的。（浏览器页面效果上：在 750px 屏幕上想加 2 个像素，但在 375px 屏幕下，由于根元素的 font-size 变成了 50px，实际上是加了 1px。）

总之这样设置保证了不管任何屏幕宽度下（开发人员）换算rem和px。都按照1rem = 100px。

示例：样式设置与还原

示例样式：

.button {
  width: 200px; /* 在代码中写 px */
  height: 50px;
  font-size: 16px;
}

转换后：

通过 postcss-px2rem，生成的 CSS 自动转为：

.button {
  width: 2rem; /* 200px = 2rem */
  height: 0.5rem; /* 50px = 0.5rem */
  font-size: 0.16rem; /* 16px = 0.16rem */
}

最佳移动端适配方案—REM