使用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項(xiàng)

// 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, // 視窗的寬度，對(duì)應(yīng)的是我們?cè)O(shè)計(jì)稿的寬度，一般是750                     
       viewportHeight: 1334, // 視窗的高度，根據(jù)750設(shè)備的寬度來(lái)指定，一般指定1334，也可以不配置 
       unitPrecision: 3, // 指定`px`轉(zhuǎn)換為視窗單位值的小數(shù)位數(shù)（很多時(shí)候無(wú)法整除）   
       viewportUnit: 'vw', // 指定需要轉(zhuǎn)換成的視窗單位，建議使用vw 
       selectorBlackList: ['.ignore', '.hairlines'], //指定不轉(zhuǎn)換為視窗單位的類，可以自定義，可以無(wú)限添加,建議定義一至兩個(gè)通用的類名 
       minPixelValue: 1, // 小于或等于`1px`不轉(zhuǎn)換為視窗單位，你也可以設(shè)置為你想要的值 
       mediaQuery: false // 允許在媒體查詢中轉(zhuǎn)換`px` 
    }, 
    "postcss-viewport-units":{},  
     "cssnano": { preset: "advanced", autoprefixer: false, "postcss-zindex": false }, 
   }
} 

添加viewport-units-buggyfill

viewport-units-buggyfill主要有兩個(gè)JavaScript文件：
viewport-units-buggyfill.js和viewport-units-buggyfill.hacks.js。
你只需要在你的HTML文件中引入這兩個(gè)文件。比如在Vue項(xiàng)目中的index.html引入


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

img { 
content: normal !important; 
}

參考鏈接

1. 如何在Vue項(xiàng)目中使用vw實(shí)現(xiàn)移動(dòng)端適配
2. 使用Flexible實(shí)現(xiàn)手淘H5頁(yè)面的終端適配
3. 再聊移動(dòng)端頁(yè)面的適配