移动端适配rem、rem的计算、一套pxtorem配置适配pc端h5端

一、rem的使用

1. 安装 postcss-pxtorem，前提需安装postcss

npm i postcss postcss-pxtorem -D

2. postcss.config.js配置

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 75, // 通常设置为设计稿的1/10 即750设计稿则设置75
      exclude: /(node_modules)/,
      selectorBlackList: ['html', 'weui'],
      propList: ['*'],
      mediaQuery: false
    },
    autoprefixer: {}
  }
}

3. fontSize的设置
   在全局 css 中，将 html 的 font-size 设置为10vw，至此，vue 中则成功引入 pxtorem，编译后则可看到效果。

为什么是10vw，请往下看

二、rem的计算

在使用 pxtorem 插件时，rootValue 表示相对于设计稿宽度的根元素字体大小，通常是设置为设计稿宽度的 1/10。在这里，我们将 rootValue 设置为 75px，而设计稿的宽度是750px，因此fontsize应设置为 (75 / 750) * 100vw = 10vw。如下方公式所示：

三、一套pxtorem配置，适配pc端与移动端

背景：在一些官网门户的开发中，通常需要pc端（index）与移动端（mobile）两个页面，

这时候使用相同的 rootValue 和 html font-size 是不合理的，因此需要根据不同端使用不同尺寸换算，那么问题来了，当 rootValue 为75px时， 1920px 的设计稿， font-size为多少呢。根据 rem 计算，我们可以得到以下计算式，得出 font-size 应为 3.90625vw

计算出 1920px 所对应的 font-size 之后，我们还需要进行第二步，判断用户在哪个端打开页面。

创建两个scss文件，pc.scss 和 h5.scss， 分别设置
pc.scss

html {
  font-size: 3.90625vw;
}

h5.scss

html {
  font-size: 10vw;
}

然后在 main.js 文件中进行判断引入

// 判断客户端
// 768 通常是根据经验和设计标准而来，用于划分移动端和PC端的阈值。这些值并不是固定的，可以根据实际需求进行调整。
const isMobile = window.innerWidth <= 768;
if (isMobile) {
  require('./styles/h5.scss')
} else {
  require('./styles/pc.scss')
}

至此，我们便完成了项目中引入 rem，并了解了 rem 计算及如何配置多端 rem 标准