添加postcss插件
npm i --save postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano
在config-overrides.js里引入（也可以使用eject在webpack.config.js里配置，此处不暴露webpack)
const postcssAspectRatioMini = require('postcss-aspect-ratio-mini');
const postcssPxToViewport = require('postcss-px-to-viewport');
const postcssWriteSvg = require('postcss-write-svg');
const postcssCssnext = require('postcss-cssnext');
const postcssViewportUnits = require('postcss-viewport-units');
const cssnano = require('cssnano');
在override里加入
addPostcssPlugins([require("postcss-flexbugs-fixes"),
postcssAspectRatioMini({}),
postcssPxToViewport({
viewportWidth: 750, // (Number) The width of the viewport.
viewportHeight: 1334, // (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.
}),
postcssWriteSvg({
utf8: false
}),
postcssCssnext({}),
postcssViewportUnits({}),
cssnano({
// preset: "advanced",
autoprefixer: false,
"postcss-zindex": false
})
])
以上即可上使用,若报 query 'dead' 错误，browers不支持 修改pakage.json文件的browserslist为下:
"browserslist": [
">1%",
"last 4 versions",
"Firefox ESR",
"not ie < 9",
"Android > 4.4",
"IOS >= 8"
]
npm start即可
适配其他不兼容机型
在 pulic/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>
body尾部添加：
<script>
window.onload = function () {
window.viewportUnitsBuggyfill.init({
hacks: window.viewportUnitsBuggyfillHacks
});
}
</script>
viewport-unit-buggyfill会引起部分浏览器无法显示图片，在全局中添加以下
img{
//修正viewport-unit-buggyfill带来的影响
//比如img和伪元素::before(:before)或::after（:after）。
//在img中content会引起部分浏览器下，图片不会显示。
content: normal !important;
}
