最近看到产品UI测试小姐姐一起围着新来的单身前端同学,深入探讨为啥写的1px在IOS上面频繁翻车。看着据理力争写的就是1px的前端和围成一圈的小姐姐,不由得感叹小年轻怎么那么鸡贼。。。
简介
回归正题,在做移动端页面时,由于设备屏幕的设备像素比(DPR)的不同,需要对不同的页面做兼容,这也是导致各种设备上面1px边框问题出现的原因。这里先不谈如何对移动端设备做兼容,也不谈什么是设备像素、什么是逻辑像素、什么是设备独立像素,只简单介绍下遇到1px边框问题的常用解决方案。ctrl+c ctrl+v 就能让小姐姐们不在打扰你coding。。。
上代码
.border-1px,
.border-top-1px,
.border-bottom-1px,
.border-left-1px,
.border-right-1px {
position: relative;
}
.border-top-1px::after {
content: '';
position: absolute;
left: 0;
border-bottom: 1px solid #000;
width: 100%;
transform: scaleY(0.5);
-webkit-transform: scaleY(0.5);
transform-origin: 0 0;
-webkit-transform-origin: 0 0;
}
.border-bottom-1px::after {
content: '';
position: absolute;
bottom: 0;
width: 100%;
border-bottom: 1px solid #000;
transform: scaleY(0.5);
-webkit-transform: scaleY(0.5);
transform-origin: 0 0;
-webkit-transform-origin: 0 0;
}
.border-left-1px::after {
content: '';
position: absolute;
top: 0;
border-left: 1px solid #000;
height: 100%;
transform: scaleX(0.5);
-webkit-transform: scaleX(0.5);
transform-origin: 0 0;
-webkit-transform-origin: 0 0;
}
.border-right-1px::after {
content: '';
position: absolute;
top: 0;
right: 0;
border-left: 1px solid #000;
height: 100%;
transform: scaleX(0.5);
-webkit-transform: scaleX(0.5);
transform-origin: 0 0;
-webkit-transform-origin: 0 0;
}
.border-1px::after {
content: '';
position: absolute;
top: 0;
left: 0;
border: 1px solid #000;
box-sizing: border-box;
width: 200%;
height: 200%;
transform: scale(0.5);
-webkit-transform: scaleX(0.5);
transform-origin: left top;
-webkit-transform-origin: left top;
}
上述代码安到你的div上面就能用,但是注意伪元素的占用问题。还有一点,这种方法只是处理了DPR=2的设备,但实际显示效果也足够赶走产品 UI了。
优化
可以用媒体查询对这中方法做进一步优化
@media screen and (-webkit-min-device-pixel-ratio: 2){
......
}
@media screen and (-webkit-min-device-pixel-ratio: DPR){
......此处需要修改为 伪代码 transform: scale(1/DPR);
}
其他方法:
- 设置小数像素(支持到IOS8,不支持安卓)
- box-shdow(颜色会变浅)
- border-image
- JS动态修改viewport + rem布局
个人主观感觉都不太好用,但方法各有优劣,根据个人习惯选择就好