基於 vue-cli3 創建一個移動端項目
vue add vue-h5
cd vue-h5
npm run serve
安裝 postcss 相關插件
由於 vue-cli 已經內置了 postcss，只需要安裝相關插件，就可以實現 vw/vh 自適應布局。
npm i --save postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano
下面簡單的說一下這幾個插件的作用。
.postcss-px-to-viewport
用來把px單位轉換為vw、vh、vmin或者vmax這樣的視窗單位，也是vw適配方案的核心插件之一。
我們都是使用750px寬度的視覺設計稿，那么100vw = 750px，即1vw = 7.5px。那么我們可以根據設計圖上的px值直接轉換成對應的vw值。在實際擼碼過程，不需要進行任何的計算，直接在代碼中寫px。
.postcss-aspect-ratio-mini
用來處理元素容器寬高比。
.postcss-write-svg
用來處理移動端1px的解決方案。
安裝完畢后我們需要配置一下，在postcss.config.js中配置如下內容：
module.exports = {
"plugins": {
// "postcss-import": {},
// "postcss-url": {},
// to edit target browsers: use "browserslist" field in package.json
"postcss-write-svg": {
uft8: false
},
"postcss-cssnext": {},
"postcss-px-to-viewport": {
viewportWidth: 750, // 設計稿寬度
viewportHeight: 1334, // 設計稿高度，可以不指定
unitPrecision: 3, // px to vw無法整除時，保留幾位小數
viewportUnit: 'vw', // 轉換成vw單位
selectorBlackList: ['.ignore', '.hairlines'], // 不轉換的類名
minPixelValue: 1, // 小於1px不轉換
mediaQuery: false, // 允許媒體查詢中轉換
exclude: /(\/|\\)(node_modules)(\/|\\)/ //不轉換我們引入的第三方包
},
"postcss-viewport-units": {},
"cssnano": {
preset: "advanced",
autoprefixer: false, // 和cssnext同樣具有autoprefixer，保留一個
"postcss-zindex": false
}
}
}
兼容方案
如果您想要兼容所有的低版本瀏覽器，可以使用Viewport Units Buggyfill
- 引入js文件，打開
public/index.html，首先在<head></head>中引入阿里cdn
<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>
- 在body中，加入如下js代碼
<script>
window.onload = function () {
window.viewportUnitsBuggyfill.init({
hacks: window.viewportUnitsBuggyfillHacks
});
}
</script>
- 如果遇到img無法顯示，則添加全局css
img {
content: normal !important;
}