最近做了一个大屏的项目，需要与手机端适配，在各大论坛搜寻和大神的指导下之后找到了解决方案。
大屏
第一步：先下包，这里用到lib-flexible和postcss-pxtorem
直接下载postcss-pxtorem的话会报错，所以这里我们下载指定版本postcss-pxtorem@5.1.1
1、npm下载
npm install lib-flexible --save-dev //npm下载依赖
npm install postcss-pxtorem@5.1.1 --save-dev //自动把px转成rem
2、yarn下载
yarn add lib-flexible //yarn下载依赖
yarn add postcss-pxtorem@5.1.1 //自动把px转成rem
第二步：在main.js引入
import 'lib-flexible'
第三步：修改lib-flexible源文件配置
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr < 540) {
width = 540 * dpr; }
else if(width / dpr > 1980){
width = 1980 * dpr
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
//这里只需要修改屏幕最大宽度和最小宽度即可（540和1980）
第四步：在vue.config.js里配置
module.exports = {
css: {
sourceMap: false,
loaderOptions: {
css: {
// options here will be passed to css-loader
},
postcss: {
// options here will be passed to postcss-loader
},
},
},
}
第五步：在vue.config.js同级新建postcss.config.js
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 192, //移动端这里的rootValue可以根据设计稿的大小/10即可
propList: ['*'],
},
},
}
最后
重新启动项目就OK
