02-移动端vm适配方案

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

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

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

设备宽度=100vm
1vm = 750px/100px = 7.5px
100px = 1/7.5*100vm
1
2
3
vm不需要自己再动态计算根字体，页面渲染速度更快，所以我们采取vm来适配。

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, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
                        unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
                        propList: [
                            "*"
                        ],
                        viewportUnit: "vw", // 指定需要转换成的视窗单位，建议使用vw
                        fontViewportUnit: "vw",
                        selectorBlackList: [], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
                        minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
                        mediaQuery: false, // 允许在媒体查询中转换`px`
                        replace: true,
                        exclude: /(/|\)(node_modules)(/|\)/,
                    })
                ]
            }
        }
    }
}

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

但是会存在一个问题，postcss只能转换css，不能转行内样式，这个时候我们可以利用一个插件style-vm-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')
    }
}

---

另一种方案：

1.安装依赖

npm install postcss-px-to-viewport -D

2.修改 .postcssrc.js

将根目录下 .postcssrc.js 文件修改如下

// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
    },
    'postcss-px-to-viewport': {
      viewportWidth: 375, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
      unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
      viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
      selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false // 允许在媒体查询中转换`px`
    }
  }
}

3.删除原来的 rem 相关代码

src/main.js 删除如下代码

// 移动端适配
import 'lib-flexible/flexible.js'

package.json 删除如下代码

"lib-flexible": "^0.3.2",
"postcss-pxtorem": "^5.1.1",