基于 vant +postcss-pxtorem 实现移动端 REM 适配

Vant 中的样式默认使用 px 作为单位，如果需要使用 rem 单位，推荐使用以下两个工具：

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

下面我们分别将这两个工具配置到项目中完成 REM 适配。

一、使用 lib-flexible 动态设置 REM 基准值（html 标签的字体大小）

1. 安装

   # yarn add amfe-flexible
   npm i amfe-flexible
   

2. 加载执行该模块

   import 'amfe-flexible'
   

二、使用 postcss-pxtorem 将 px 转为 rem

1. 安装

   # yarn add -D postcss-pxtorem
   # -D 是 --save-dev 的简写
   npm install postcss-pxtorem -D
   

2. 然后在项目根目录中创建 .postcssrc.js 文件

   module.exports = {
   	plugins: {
   		 // 配置使用 autoprefixer 插件
   		 // 作用：生成浏览器 CSS 样式规则前缀
   		 // VueCLI 内部已经配置了 autoprefixer 插件
   		 // 所以又配置了一次，所以产生冲突了 所以需要删掉 'autoprefixer'
   		 //'autoprefixer': {
   		    //browsers: ['Android >= 4.0', 'iOS >= 8']
   		  //},
   		  // 配置使用 postcss-pxtorem 插件
   		  // 作用：把 px 转为 rem
   	'postcss-pxtorem': {
   		 //通过查阅文档我们可以看到 rootValue 支持两种参数类型：
    		//数字：固定值 
    		//函数：动态计算返回
   	  	//postcss-pxtorem 处理每个 CSS 文件的时候都会来调用这个函数
   		//它会把被处理的 CSS 文件相关的信息通过参数传递给该函数
   		//rootValue: 37.5,
   		rootValue ({ file }) {
   		   //将 vant 组件 rem 设置成 37.5  自己写的样式设置为 75 这样就不需要考虑二倍图 除二了
   			return file.indexOf('vant') !== -1 ? 37.5 : 75
   		},
   		propList: ['*']
   	}
   }
   

}
```

需要注意的是：该插件不能转换行内样式中的 px，例如

<div style="width: 200px;"></div>

关于 .postcssrc.js 配置文件

1. PostCSS 介绍

PostCSS 是一个处理 CSS 的处理工具，本身功能比较单一，它主要负责解析 CSS 代码，再交由插件来进行处理，它的插件体系非常强大，所能进行的操作是多种多样的，例如：

• Autoprefixer 插件可以实现自动添加浏览器相关的声明前缀
• PostCSS Preset Env 插件可以让你使用更新的 CSS 语法特性并实现向下兼容
• postcss-pxtorem 可以实现将 px 转换为 rem
• …

目前 PostCSS 已经有 200 多个功能各异的插件。开发人员也可以根据项目的需要，开发出自己的 PostCSS 插件。

PostCSS 一般不单独使用，而是与已有的构建工具进行集成。

Vue CLI 默认集成了 PostCSS，并且默认开启了 autoprefixer 插件

Vue CLI 内部使用了 PostCSS。

你可以通过 .postcssrc 或任何 postcss-load-config 支持的配置源来配置 PostCSS。也可以通过 vue.config.js 中的 css.loaderOptions.postcss 配置 postcss-loader。

我们默认开启了 autoprefixer。如果要配置目标浏览器，可使用 package.json 的 browserslist 字段。

1. Autoprefixer 插件的配置
   autoprefixer 是一个自动添加浏览器前缀的 PostCss 插件，browsers 用来配置兼容的浏览器版本信息，但是写在这里的话会引起编译器警告。

   Replace Autoprefixer browsers option to Browserslist config.
   Use browserslist key in package.json or .browserslistrc file.
   
   Using browsers option can cause errors. Browserslist config
   can be used for Babel, Autoprefixer, postcss-normalize and other tools.
   
   If you really need to use option, rename it to overrideBrowserslist.
   
   Learn more at:
   https://github.com/browserslist/browserslist#readme
   https://twitter.com/browserslist
   

   警告意思就是说你应该将 browsers 选项写到 package.json 或 .browserlistrc 文件中。
   具体语法请参考这里

2. postcss-pxtorem 插件的配置

   rootValue：表示根元素字体大小，它会根据根元素大小进行单位转换

   propList 用来设定可以从 px 转为 rem 的属性

   例如 * 就是所有属性都要转换，width 就是仅转换 width 属性