VUE項目PC端實現自適應rem

　　　　由於項目設計搞是采用的1920*1080的尺寸；項目也基本快做完了，用的1920*1080的尺寸；現在要實現自適應；我這邊選擇的是rem自適應；當然你也可以用@media多媒體；也可以用寫幾個適應不同尺寸的css樣式；按需引入；

　　　　這里我采用的是rem：

步驟：

一：安裝 lib-flexible

$ npm install lib-flexible --save

二·、在main.js文件引入lib-flexible

import 'lib-flexible/flexible'

三、安裝px2rem-loader

$ npm install px2rem-loader --save-dev

四、安裝postcss-pxtorem

npm install postcss-pxtorem

五、在根目錄新建一個文件夾 postcss.config.js；里面寫入

const pxtorem = require("postcss-pxtorem");
module.exports = {
  plugins: [
    pxtorem({
      rootValue: 192,//我這里配置的是我1366分辨率下的基准值，會在下面解釋
      unitPrecision: 5,
      propList: ["*"],
      selectorBlackList: [/^\.nop2r/, /^\.am/,'html'],
      //排除antd樣式，由於我給html設置了min-width，所以把html也排除在外不做rem轉換
      replace: true,
      mediaQuery: false,
      minPixelValue: 0
    })
  ]
}

　六、更改這個文件夾下的flexible.js文件

七、在flexible.js文件中找到這個函數，把這個固定尺寸540，改成width

 

有疑問請加群討論：854184700