vue-cli3自适应页面（flexible和 postcss-px2rem）

1.安装 flexible和 postcss-px2rem

npm i lib-flexible postcss-px2rem  --save

2.flexible和 postcss-px2rem插件作用

a.flexible会为页面根据屏幕自动添加标签，动态控制initial-scale，maximum-scale，minimum-scale等属性的值 ===>设备缩放比

例子：
flexible说明

b.postcss-px2rem会将px转换为rem，rem单位用于适配不同宽度的屏幕，根据标签的font-size值来计算出结果，1rem=html标签的font-size值。

如下所示：
box的单位为px，在网页运行时，自动转换成rem
postcss-px2rem说明

3.引入lib-flexible

在项目入口文件main.js 中引入lib-flexible
引入说明

import 'lib-flexible'

注意:由于flexible会动态给页面header中添加标签，所以务必请把目录 public/index.html 中的这个标签注释！！！

图片说明

问题：

我在上面的步骤全部完成后有一个问题，我明明设置的宽度是按1920来的，计算出来1rem=54px。
最后发现 flexible.js文件中：

找到问题了就解决问题，既然文件把屏幕宽度写死了，那就不写死：

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;
  }

flexible.js文件路径(node_modules\lib-flexible\flexible.js)

4.配置postcss-px2rem

px2rem的配置放在vue-cli3 项目中vue.config.js中。
vue-cli3创建的项目是没有vue.config.js的，但是最后你开发完了项目也要打包的时候也得手动创建这个文件！

手动在项目根目录创建vue.config.js，引入代码

下面是vue.config.js，复制过去可直接使用

module.exports = {
    // css相关配置
    css: {
        // 启用 CSS modules
        modules: false,
        // 是否使用css分离插件
        extract: true,
        // 开启 CSS source maps?
        sourceMap: false,
        // css预设器配置项
        loaderOptions: {
            css: {},
            postcss: {
                plugins: [
                    //remUnit这个配置项的数值是多少呢？？？ 通常我们是根据设计图来定这个值，原因很简单，便于开发。
                    //假如设计图给的宽度是1920，我们通常就会把remUnit设置为192，这样我们写样式时，可以直接按照设计图标注的宽高来1:1还原开发。
                    require('postcss-px2rem')({
                        remUnit: 192
                    })
                ]
            }
        },
    },
}

remUnit :假如设计图给的宽度是1920，我们通常就会把remUnit设置为192（设计图宽度的十分之一），这样我们写样式时，可以直接按照设计图标注的宽高来1:1还原开发。
现在重启项目，看一下运行结果.