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

原文链接：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; }

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