使用postcss-px2rem-exclude实现将px转换为rem进行移动端适配
安装依赖
npm install postcss-px2rem-exclude --save-dev
.postcssrc.json添加：
module.exports = {
........
'plugins':{
"autoprefixer":{},
'postcss-px2rem-exclude':{
remUnit:37.5,
propList:[],
exclude:/(node_modules)/i
}
}
}
备注：若安装postcss-px2rem-exclude后未自动生成.postcssrc.json文件，可自行在根文件夹下手动创建
使用postcss-px2rem-exclude实现将px转换为rem进行移动端适配还需配合lib-flexible或自行编写转换规则才可进行实现，两种方法如下：
1、npm install lib-flexible --save
在main.js中引入
import 'lib-flexible/flexible'
2、与main.js同级文件夹下新建编写rem.js后在main.js中引入rem.js文件
rem.js文件代码如下：
const baseSize = 32;
function setRem(){
const winWidth = document.documentElement.clientWidth/375;
document.documentElement.style.fontSize =( baseSize*Math.min(winWidth,2))+'px
}
方法一与方法二的区别：
1、方法一不需要进行新文件的创建和编写
2、使用方法一，自动设置根元素字体大小时为屏幕的宽度除以10，例如屏幕为375，则会发现根元素字体大小为37.5px，414宽度的屏幕根元素字体大小为41.4px，以此类推；使用方法二，标准屏幕375宽度下，根元素字体大小为rem.js设置的baseSize的值为32px。
使用postcss-px2rem-exclude实现将px转换为rem进行移动端适配弊端：（在小编的项目中发现）
1、只能将.vue文件中，style标签中的px转换为rem，对行内样式无效
2、.css文件中的px转换无效，意味着在css文件中单位要使用rem
3、使用的UI框架中的样式px转换也无效，若需要进行转换，可在.vue文件style标签中使用/deep/对需要转换的类名进行重写或复写，或在css文件中对需转换的类名手动进行rem的转换。
