产生原因
因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在devicePixelRatio=2的retina屏下会显示成2px,所以在高清瓶下看着1px总是感觉变胖了
解决之道
1.在ios8+中当devicePixelRatio=2的时候使用0.5px
div{
border:1px solid #000;
}
@media (-webkit-min-device-pixel-ratio: 2) {
div{
border:0.5px solid #000;
}
}
2. transform: scale(0.5)
//下面是通过伪类实现的1px线条
.onePxHei(@borColor:#efefef,@borPx:1px){
&:after{
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 2px;
-webkit-transform: scale(1,.5);
transform: scale(1,.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
content: '';
background-color: @borColor;
}
}
本人用的是less,这是mixin
缺点:圆角无法实现,实现4条边框比较麻烦
3.使用background-image
//通过background实现的1px,设置到dom本身,不会绘制padding和margin区域
.onePxBottomByBg(@borColor:#efefef,@borPx:1px){
background-image: -webkit-linear-gradient(top, @borColor, @borColor 50%, transparent 50%);
background-image: linear-gradient(180deg, @borColor, @borColor 50%, transparent 50%);
background-size: 120% @borPx;
background-repeat: no-repeat;
background-position: bottom left;
background-origin: content-box;
}
优点:基本所有场景都能满足,包含圆角的button,单条,多条线
缺点:大量使用渐变可能导致性能瓶颈
总结:建议background-image+transform: scale(0.5)配合使用,优先使用缩放