在做移动端项目的时候需要对不同规格的设备进行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: ['*']
}
}
}