vue-cli + postcss 实现移动端自适应
基于 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;
}
