前言
在之前,我们曾使用过淘宝的lib-flexible实现移动端的自适应解决方案,但是lib-flexible更推荐使用vw作为移动端自适应的解决方案
接下来我们将配置vw作为移动端的自适应解决方案(以react为例)
安装依赖
npm i postcss-aspect-ratio-mini postcss-px-to-viewport-opt postcss-write-svg postcss-preset-env postcss-viewport-units cssnano -S
配置config下的webpack.config.js
- 引入插件
// 引入postCss插件
const postcssAspectRatioMini = require('postcss-aspect-ratio-mini');
const postcssPxToViewport = require('postcss-px-to-viewport-opt');
const postcssWriteSvg = require('postcss-write-svg');
const postcssPresetEnv = require('postcss-preset-env');
const postcssViewportUnits = require('postcss-viewport-units');
const cssnano = require('cssnano');
- 引入postCss配置
// 引入postCss配置
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', '.antd'], // (Array) The selectors to ignore and leave as px.
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.
// exclude: /(\/|\\)(node_modules)(\/|\\)/,
}),
postcssWriteSvg({
utf8: false
}),
postcssPresetEnv({}),
postcssViewportUnits({}),
cssnano({
"cssnano-preset-advanced": {
zindex: false,
autoprefixer: false
},
}),
- 测试下vw的设置是否生效
兼容低版本安卓
我们加入兼容我们android 低版本的机型hack 加入viewport-units-buggyfill配置
同学们,经过实战配置viewport-units-buggyfill之后,4.2 4.3 4.4+ 系统版本上表现都 ok,项目中主要使用flexbox 布局
demo 版本中直接引入阿里的cdn 文件,在自己项目中可以放自己公司的服务器或者项目中。
打开public/index.html,在head 中插入 viewport-units-buggyfill 和body 中使用
<head>
<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>
</head>
<body>
<script>
window.onload = function () {
window.viewportUnitsBuggyfill.init({
hacks: window.viewportUnitsBuggyfillHacks
});
}
</script>
<body>
项目中有遇到的坑
- cssnano 如果你的版本为:4+ 以上,请在配置中如下方案配置:
cssnano({
"cssnano-preset-advanced": {
zindex: false,
autoprefixer: false
},
})
我遇到了始终把你定位的z-index值重新计算为:1,巨坑,不然你会一口老血喷出来的。
和cssnano 3+版本配置不一样。
- ios 系统下img不显示问题,解决方案如下:
img {
content: normal !important; /*vw布局 img属性会默认加上content,导致显示不出图片的bug*/
}
- 1px 问题,解决方案
/*1px 解决方案*/
@svg square {
@rect {
fill: var(--color, white);
width: 100%;
height: 50%;
}
}
.example-line {
width: 100%;
background: white svg(square param(--color #E6E6E6));
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: bottom left;
}
/*1px 解决方案*/
/*伪元素1px*/
.row-cell:before {
content: " ";
position: absolute;
left: 0;
top: 0;
right: 0;
height: 1px;
border-top: 1px solid #e5e5e5;
color: #e5e5e5;
transform-origin: 0 0;
transform: scaleY(0.5);
z-index: 2;
}
- 有伪类使用content报错 already has a ‘content’ property, give up to overwrite it.
解决办法
配置.postcssrc.js的postcss-viewport-units
'postcss-viewport-units': {
filterRule: rule => rule.selector.includes('::after') && rule.selector.includes('::before') && rule.selector.includes(':after') && rule.selector.includes(':before')
}
or
'postcss-viewport-units': {
filterRule: rule => rule.nodes.findIndex(i => i.prop === "content") === -1
}
todos
-
目前为了解决antd-mobile等第三方UI样式也能被转换成vw,当前的临时做法是让插件也转换node_modules里的第三方库
但是这样会导致打包效率降低,应该优化正则表达式,除了antd-mobile和其他第三方UI库,node_modules里的所有文件都不参与转换 -
除了上述办法能解决自适应,我们还可以写scss/less函数,让其自动通过运算,将px数值转为对应vw
文章参考
https://github.com/caoxiaoke/react-vw-layout
https://www.cnblogs.com/musi03/p/10677492.html
https://github.com/gaohan1994/react-vw-layout
https://blog.csdn.net/liyunkun888/article/details/91868776
https://www.cnblogs.com/xushengguan/p/12356517.html
https://blog.csdn.net/weixin_44533589/article/details/108204718
https://www.jianshu.com/p/ae0623fac11e
https://www.w3cplus.com/mobile/vw-layout-in-vue.html
https://www.w3cplus.com/css/vw-for-layout.html
https://segmentfault.com/a/1190000014185590
https://www.chrisyue.com/please-dont-use-rem-to-implement-flexible-layout-in-mobile-device.html
https://www.jianshu.com/p/7139c05c7971
https://www.cnblogs.com/ttjm/p/12059713.html
https://github.com/evrone/postcss-px-to-viewport/blob/master/README_CN.md
https://www.jianshu.com/p/309bda77c82a
https://www.cnblogs.com/zy20160429/p/8915637.html
https://www.yht7.com/news/11942
https://www.pianshen.com/article/5025263353/
https://blog.csdn.net/weixin_45784283/article/details/105482067