移动端适配终极大招

前端工作至今终于找到一个比较理想的适配方案，觉得颇为好用，特来分享。

原文链接：https://www.w3cplus.com/mobile/vw-layout-in-vue.html

原文作者讲解很是详细（我看到的时候还没有收费哈哈哈），特意总结记录一下，项目建立在vue基础上，vue起步可以看这篇文章。注：此篇文中用到的vue-cli已有更新的版本，可自行到官网查看学习。

主要总结一下需要安装的插件以及相关配置：

一、插件

一般vue建项目之初，已经有了postcss-import、postcss-url以及autoprefixer（如果没有的话执行如下命令自行安装），

cnpm i postcss-import postcss-url --S

还需安装如下插件

cnpm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S

安装之后在项目根目录下的package.json文件中，应看到这些插件：（如果发现有缺少的，再安装上缺少插件就好）

二、配置

在根目录下找到.postcssrc.js文件，如果是最新版vue cli找到postcssrc.config.js文件，进行如下配置：

module.exports = {
  plugins: {
    'postcss-import': {},
    'postcss-url': {},
    'postcss-aspect-ratio-mini': {},
    'postcss-write-svg': { utf8: false },
    'postcss-cssnext': {},
    'postcss-px-to-viewport': { 
      viewportWidth: 1136, // (Number) The width of the viewport.
      viewportHeight: 2360, // (Number) The height of the viewport.
      unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.
      viewportUnit: 'vw', // (String) Expected units.
      selectorBlackList: ['.ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px.
      minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
      mediaQuery: false // (Boolean) Allow px to be converted in media queries.
    },
    'postcss-viewport-units': {},
    'cssnano': {
      preset: 'advanced',
      autoprefixer: false,
      'postcss-zindex': false
    }
  }
}

注：1.把配置文件中原有的autoprefixer：{}删掉。  2.viewportWidth和viewportHeight为你所用的设计图的宽高

三、启动项目

如有关于cssnano advanced的报错，再

cnpm i cssnano-preset-advanced --S

就好啦。接下来你就可以完全用设计图中的尺寸设置图片、文字、间距，全写确定px值，会自动转为vw和vh，简直是巨巨巨方便～～～

补充：原文作者最后有提到兼容安卓版本4.4以下手机自带浏览器的，可以在index.html中添加

<script src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>
<script>
    window.onload = function () {
        window.viewportUnitsBuggyfill.init({
          hacks: window.viewportUnitsBuggyfillHacks
        })
    }
</script>

另外，我有遇到ios中不认识css的content属性的情况导致图片不显示，只好全局加了个样式：（觉得此解决办法甚low，如果有更好的烦请告知，先行谢过啦～）

* {
  content: none !important;
}

第一次发文章，如有雷同纯属巧合，如有错误请指出，原创文章如需转载请标明出处。笔芯笔芯❤️