最近在写一些移动端的页面,总会遇到一些适配问题,以前呢也不知道为什么,总是习惯用rem来做单位,可是总有问题,写起来相当难受,于是我坐不住了,一定要去看看有没有更好的方法。
然后就有了已下心得。
先吐槽一句,rem不知道是谁带起来的,坑了好多人。
想必做前端的肯定都知道vw,vh这样的相对单位吧。它是相对于屏幕的宽度来的,具体可以看看这篇文章
接下来就是如何写项目配置,首先安装postcss-px-to-viewport
这个插件,然后在项目根目录创建(如果有就不用).postcssrc.js
文件
具体配置如下:
module.exports = {
"plugins": {
"postcss-import": {},
"autoprefixer": {},
"postcss-px-to-viewport": {
viewportWidth: 750,
// viewportHeight: 1334,
unitPrecision: 3,
viewportUnit: 'vw',
selectorBlackList: [
'.ignore',
'.weui-dialog',
'.swiper',
'.weui-toast',
'.weui-loading',
'.weui-icon_toast'
], // 这是需要忽略转换的css名称,为了搭配一些第三方ui库使用
minPixelValue: 1,
mediaQuery: false
}
}
}
viewportWidth: 750
这个配置指的是ui给你的移动端页面是750px宽,这样对应的话,你的css(less)文件里写单位还是写原来的px就行,比如蓝湖上某张图片的宽高是75px*75px,那么你在css里也直接写就ok。
.img{
width: 75px;
height: 75px;
}
// 最后会编译为
.img{
width: 10vw;
height: 10vw;
}
书写上和与ui的交流上完全不用人为手动转化,是不是有种恍然大悟的感觉,写过小程序就能明白,小程序的rpx
单位其实也一样的原理。
最后想说,目前来看,我觉得flex布局+vw是解决移动端适配最完美的解决方案。
网友评论