vue cli3中移动端适配方案——vw

vw是新出的移动端适配方案，提到vw我们就不得不说rem，我们首先来看下两者的区别
rem布局
方案：
规定750px 尺寸下，我们设置跟字体html的font-size: 100px, 即1rem = 100px
这样750px 尺寸的psd图片上，量得的宽度/高度， 如150px, 写到css中的时候，需要经过换算

150px/100px = 1.5rem

我们随着设备尺寸变化，按比例750px/100px 修改html的根字体大小
rem随着跟字体变化，则页面上所有用rem单位的元素大小也跟着变化
监听resize方法，设备宽度变化时，计算得到根字体大小，并修改html的根字体，实现响应式布局

VW布局
vw是移动端支持较好的css属性，设备宽度 = 100vw，浏览器会自动帮我们计算1vw, 2vw…等等大小
我们在上面的rem布局中，750px宽度下，设置根字体html的font-size: 100px，之后需要用js按比例动态计算根字体的大小，然而用js没有用css修改的速度快，这里我们保持750px/100px的比例

设备宽度=100vw
1vw = 750px/100px = 7.5px
100px = 1/7.5*100vw

vw不需要自己再动态计算根字体，页面渲染速度更快，所以我们采取vw来适配。

vue-cli3中我们可以引入postcss-px-to-viewport插件

npm install postcss-loader postcss-px-to-viewport --save-dev

因为插件的配置选项中有个exclude选项，它的值只支持正则表达式，但是正则表达式再json中是不允许的，所以不要配置在package.json中，要配置在vue.config.js里

module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require("postcss-px-to-viewport")({
                        unitToConvert: "px",
                        viewportWidth: 375,
                        unitPrecision: 3,
                        propList: [
                            "*"
                        ],
                        viewportUnit: "vw",
                        fontViewportUnit: "vw",
                        selectorBlackList: [],
                        minPixelValue: 1,
                        mediaQuery: false,
                        replace: true,
                        exclude: /(\/|\\)(node_modules)(\/|\\)/,
                    })
                ]
            }
        }
    }
}

配置完成后重启下项目，就会发现，页面元素已经可以自适应啦。

但是会存在一个问题，postcss只能转换css，不能转行内样式，这个时候我们可以利用一个插件style-vw-loader(github地 https://github.com/hyy1115/style-vw-loader)

npm install style-vw-loader --save-dev

vue-cli3项目，在vue.config.js中配置

{
  chainWebpack: (config) => {
      config.module
      .rule('vue')
      .test(/\.vue$/)
      .use('style-vw-loader')
        .loader('style-vw-loader')
    }
}

大功告成~