rem的适配

1、rem是什么？

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。

注意：

rem是只相对于根元素htm的font-size，即只需要设置根元素的font-size，其它元素使用rem单位设置成相应的百分比即可。

2. rem的适配方案

Vant中的样式魔人使用是 px 作为单位。使用rem推荐使用一下两个插件：

• postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem
• lib-flexible 用于设置rem基准值

安装并引入插件：

        1. 安装

cnpm install lib-flexible postcss-pxtorem --save-dev

        2. main.js导入

import ‘lib-flexible/flexible’;

        3. postcss 配置

        创建 .postcssrc.js 文件，写入一下代码：

这份代码是基本的 postcss 配置，可以在次基础上可以根据项目需求进行修改。

module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
    },
    'postcss-pxtorem': {
      rootValue: 75,
      propList: ['*']
    }
  }
}

3. 手写rem

如下图所示

 

4. 在Vant中的注意事项：

Vant ui 中设置的为： rootValue: 37.5 ，所以，我们 .postcssrc.js 中的 rootValue 也需要配制成这样 。

配置以上代码后，1rem = 37.5px