vue-cli3 lib-flexible+postcss-pxtorem 适配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,这样就可以了
vue-cli3 lib-flexible+postcss-pxtorem 适配pc端大屏分辨率_第1张图片

你可能感兴趣的:(vue-cli3,flexible,rem)