关于vue-cli3:vuecli3-libflexiblepostcsspxtorem-适配pc端大屏分辨率

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，这样就能够了