解决方案(有以下六种)
- 0.5px 方案
- 伪类+transform
- viewport + rem
- border-image
- background-image
- postcss-write-svg
前言
在移动端web开发中,UI设计稿中设置边框为1像素,前端在开发过程中如果出现border:1px,测试会发现在retina屏机型中,1px会比较粗,即是较经典的移动端1px像素问题。
本文默认你已经对视口、物理像素、逻辑像素、设备像素比、css像素等移动端基本概念已经了解。
产生原因
设备像素比: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-