由于这个DPR的原因
我们在移动端写的
border:1px solid #ddd
在6plus上其实是3个像素(DPR=3)
在不同DPR的设备上显示是不一样的
@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);
}
}
}
@media(-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3){
.border-1px{
&::after{
-webkit-transform: scaleY(0.33);
transform: scaleY(0.33);
}
}
}
border-1px($color)
position:relative
&:after
display:block
position:absolute
left:0
bottom :0
width:100%
border-top: 1px solid $color
content:''