前言
在移动端web开发中,UI设计稿中设置边框为1像素,前端在开发过程中如果出现border:1px,测试会发现在retina屏机型中,1px会比较粗,即是较经典的移动端1px像素问题。
产生原因
- 设备像素比:
dpr
=window.devicePixelRatio,也就是设备的物理像素与逻辑像素的比值。 - 在
retina
屏的手机上,dpr
为2
或3
,css
里写的1px
宽度映射到物理像素上就有2px
或3px
宽度。 - 例如:
iPhone6
的dpr
为2
,物理像素是750
(x
轴),它的逻辑像素为375
。也就是说,1
个逻辑像素,在x
轴和y
轴方向,需要2个物理像素来显示,即:dpr=2时,表示1个CSS像素由4个物理像素点组成,如下图所示:
解决方案
1. 0.5px 方案
在IOS8+
,苹果系列都已经支持0.5px
了,可以借助媒体查询
来处理。
/* 这是css方式*/
.border {
border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.border {
border: 0.5px solid #999 }
}
/*ios dpr=2和dpr=3情况下border相差无几,下面代码可以省略*/
@media screen and (-webkit-min-device-pixel-ratio: 3) {
.border {
border: 0.333333px solid #999 }
}
IOS7
及以下和Android
等其他系统里,0.5px
将会被显示为0px
。那么我们就需要想出办法解决,说实在一点就是找到Hack
。
解决方案是通过JavaScript
检测浏览器能否处理0.5px
的边框,如果可以,给html
标签元素添加个class。
if (window.devicePixelRatio && devicePixelRatio >= 2) {
var testElem = document.createElement('div');
testElem.style.border = '.5px solid transparent';
document.body.appendChild(testElem);
}
if (testElem.offsetHeight == 1) {
document.querySelector('html').classList.add('hairlines');
}
document.body.removeChild(testElem);
}
// 脚本应该放在body内,如果在里面运行,需要包装 $(document).ready(function() {})
然后,极细的边框样式就容易了:
div {
border: 1px solid #bbb;
}
.hairlines div {
border-width: 0.5px;
}
优点:简单,不需要过多代码。
缺点:无法兼容安卓设备、 iOS 7及以下设备。
2. 伪类+transform
原理:把原先元素的border
去掉,然后利用:before
或者:after
重做border
,并 transform
的scale
缩小一半,原先的元素相对定位,新做的border
绝对定位。
/*手机端实现真正的一像素边框*/
.border-1px, .border-bottom-1px, .border-top-1px, .border-left-1px, .border-right-1px {
position: relative;
}
/*线条颜色 黑色*/
.border-1px::after, .border-bottom-1px::after, .border-top-1px::after, .border-left-1px::after, .border-right-1px::after {
background-color: #000;
}