H5需要安裝
npm install dsbridge@3.1.4
npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S
npm i cssnano-preset-advanced --save-dev
找到在根目錄中的.postcssrc.js稚伍，對(duì)PostCSS插件進(jìn)行配置
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, // 視窗的寬度戚宦，對(duì)應(yīng)的是我們設(shè)計(jì)稿的寬度，一般是750
viewportHeight: 1334, // 視窗的高度受楼，根據(jù)750設(shè)備的寬度來指定，一般指定1334猴贰，也可以不配置
unitPrecision: 3, // 指定`px`轉(zhuǎn)換為視窗單位值的小數(shù)位數(shù)（很多時(shí)候無法整除）
viewportUnit: 'vw', // 指定需要轉(zhuǎn)換成的視窗單位河狐，建議使用vw
selectorBlackList: ['.ignore', '.hairlines'], // 指定不轉(zhuǎn)換為視窗單位的類米绕，可以自定義，可以無限添加,建議定義一至兩個(gè)通用的類名
minPixelValue: 1, // 小于或等于`1px`不轉(zhuǎn)換為視窗單位迈套，你也可以設(shè)置為你想要的值
mediaQuery: false // 允許在媒體查詢中轉(zhuǎn)換`px`
},
"postcss-viewport-units": {},
"cssnano": {
preset: "advanced",
autoprefixer: false, // 和cssnext同樣具有autoprefixer碱鳞，保留一個(gè)
"postcss-zindex": false
}
}
}
在 index.html 中引入js 解決兼容問題
<script src="http://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>
