在做移动端项目的时候需要对不同规格的设备进行rem适配
方法：
- 使用lib-flexible 用于设置 rem 基准值
// 安装 npm i amfe-flexible
// main.js中加载该模块 import 'amfe-flexible'
- 使用 postcss-pxtorem 将
px转为rem，但是该插件不能将行内样式px转为rem
// 安装 npm install postcss-pxtorem -D
// 配置 /** * PostCSS 配置文件 */ module.exports = { // 配置要使用的 PostCSS 插件 plugins: { // 配置使用 autoprefixer 插件 // 作用：生成浏览器 CSS 样式规则前缀 // VueCLI 内部已经配置了 autoprefixer 插件 // 所以又配置了一次，所以产生冲突了 // 'autoprefixer': { // autoprefixer 插件的配置 // // 配置要兼容到的环境信息 // browsers: ['Android >= 4.0', 'iOS >= 8'] // }, // 配置使用 postcss-pxtorem 插件 // 作用：把 px 转为 rem 'postcss-pxtorem': { rootValue ({ file }) { return file.indexOf('vant') !== -1 ? 37.5 : 75 }, propList: ['*'] } } }
