使用vw实现移动端适配

使用vue-cli搭建脚手架，并且安装以下依赖

1. postcss-aspect-ratio-mini
2. postcss-px-to-viewport
3. postcss-write-svg
4. postcss-cssnext
5. cssnano
6. postcss-viewport-units
7. cssnano-preset-advanced ​

修改webpack.base.conf.js

添加postcss处理css文件

module: { 
rules: [ { 
    test: /\.css$/, 
    loader: 'style-loader!css-loader!postcss-loader' 
  } ] 
}

配置.postcssrc.js项

// https://github.com/michael-ciniawsky/postcss-load-config 
module.exports = { 
"plugins": { 
   "postcss-import": {}, 
   "postcss-url": {},
   "postcss-aspect-ratio-mini": {}, 
   "postcss-write-svg": { utf8: false }, 
   "postcss-cssnext": {}, 
   "postcss-px-to-viewport": { 
       viewportWidth: 750, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750                     
       viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置 
       unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）   
       viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw 
       selectorBlackList: ['.ignore', '.hairlines'], //指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名 
       minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值 
       mediaQuery: false // 允许在媒体查询中转换`px` 
    }, 
    "postcss-viewport-units":{},  
     "cssnano": { preset: "advanced", autoprefixer: false, "postcss-zindex": false }, 
   }
} 

添加viewport-units-buggyfill

viewport-units-buggyfill主要有两个JavaScript文件：
viewport-units-buggyfill.js和viewport-units-buggyfill.hacks.js。
你只需要在你的HTML文件中引入这两个文件。比如在Vue项目中的index.html引入


window.onload = function () { 
 window.viewportUnitsBuggyfill.init({ hacks: window.viewportUnitsBuggyfillHacks }); 
}

img { 
content: normal !important; 
}

参考链接

1. 如何在Vue项目中使用vw实现移动端适配
2. 使用Flexible实现手淘H5页面的终端适配
3. 再聊移动端页面的适配