vue项目页面自适应

由于项目设计搞是采用的19201080的尺寸；项目也基本快做完了，用的19201080的尺寸；现在要实现自适应；我这边选择的是rem自适应；当然你也可以用@media多媒体；也可以用写几个适应不同尺寸的css样式；按需引入；
　　　　这里我采用的是rem：
步骤：

1. 安装 lib-flexible

 npm install lib-flexible --save

2. 在main.js文件引入lib-flexible

import 'lib-flexible/flexible'

3. 安装px2rem-loader

 npm install px2rem-loader --save-dev

4. 安装postcss-pxtorem

npm install postcss-pxtorem

5. 在根目录新建一个文件夹 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
    })
  ]
}

6. 找到 node_modules 文件夹下的 lib-flexible 文件下的 flexible.js 文件，之后进入

7. 在flexible.js文件中找到这个函数，把这个固定尺寸540，改成width

    function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width = width * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

本文章转自：https://www.cnblogs.com/yaosusu/p/13920307.html