1px问题产生的原因
从移动端的角度说个具体的场景,以iphone6为例。
iphone6的屏幕宽度为375px,设计师做的视觉稿
一般是750px,也就是2x,这个时候设计师在视觉稿
上画了1px的边框,于是你就写了“border-width:1px
”,so…1px边框问题产生了。
对设计师来说它的1px是相对于750px的(物理像素),对你来说你的1px是相对于375px的(css像素)“实际上你应该是border-width:0.5px”。
关于设备像素比的知识,可以看下下张旭鑫大神的设备像素比devicePixelRatio简单介绍
解决方案
利用媒体查询和”min-device-pixel-ratio”就可以轻松的搞定,实现货真价实的1px border。
代码如下:
%border-1px{
display: block;
position:absolute;
left: 0;
width: 100%;
content: ' ';
}
.border-1px{
position: relative;
&::after{
@extend %border-1px;
bottom: 0;
border-top: 1px solid #ccc;
}
&::before{
@extend %border-1px;
top: 0;
border-bottom: 1px solid #ccc;
}
}
@media (-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5){
.border-1px{
&::after{
-webkit-transform: scaleY(0.7);
transform: scaleY(0.7);
}
}
}
@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){
.border-1px{
&::after{
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
}