H5 web 端vw适配以及rem适配在chrome下的坑

1.rem适配

今天用qq浏览器打开项目，人傻掉了，界面全部乱了，因为我用的是rem的适配方法，就开始找问题，发现在设置少于12px的时候，会有偏大的现象，这点在Chrome上不太明显，但在运用chrome内核的qq浏览器上非常明显
一个div宽高同样都是10rem 这是在qq浏览器的值：这是在火狐的值： 我的1rem小于12，可以看到了宽高明显在chrome下偏大了 多加了0.2倍。普通情况下把rem调整到12以上，这样可以解决问题 介于我运用了一些行内样式，改rem的大小非常麻烦 于是选用了vw适配方式

vw适配方案

下载postcss插件

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

如果你是vuecil2搭建的项目它是带有vue.config.js文件夹，vuecil3创建的就没有 你需要自己建一个js文件放在根目录跟src同级
然后在这个文件里 配置你的postcss插件（参数详情可以去官网找）

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

现在重新启动一下就可以了。

本人小白一枚~记录自己的成长和踩过的坑，如果有错误请大神指出