vue-cli3脚手架 lib-flexible+postcss-pxtorem 适配pc端大屏分辨率

我的我的项目是cli3构建，iviewUI框架，UI设计稿是1920*1080

1.装置lib-flexible postcss-pxtorem 插件

npm install lib-flexible postcss-pxtorem --save

2.在 main.js 文件中引入

import 'lib-flexible/flexible.js'

3.新建 postcss.config.js 或者在package.json中写入

module.exports = {    plugins: {      autoprefixer: {},    "postcss-pxtorem": {        "rootValue": 192,// 设计稿宽度或者目前失常分辨率的1/10        selectorBlackList: [".ivu"],// 要疏忽的选择器并保留为px。        minPixelValue: 2,// 设置要替换的最小像素值。        "propList": [          "*"        ]// 须要做转化解决的属性，如`hight`、`width`、`margin`等，`*`示意全副      }    }}

4.找到 node_modules/lib-flexible/flexible.js 批改源文件（作者写死了宽度）

function refreshRem(){     var width = docEl.getBoundingClientRect().width;    if (width / dpr > 540) {        //width = 540 * dpr; //获取屏幕宽度，如果宽度大于540,被写死了        width = width * dpr; //获取屏幕宽度    }    var rem = width / 10; //缩放比例能够按理论来    docEl.style.fontSize = rem + 'px';     flexible.rem = win.rem = rem; }

我的屏幕是宽度1440，这样就能够了