移动前端设置border为1px显得粗

Question

我找到过方法，但是不知道怎么用，代码如下：%border-1px{
display:block;
position:absolute;
left:0;
width:100%;
content:'';
}.border-1px{
position:relative;
&::after{
@extend%border-1px;
bottom:0;
border-top:1pxsolid#ccc;
}
&::before{
@extend%border-1px;
top:0;
border-bottom:1pxsolid#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);
}
}
}

Answer 1

在2倍屏下1px渲染为2物理像素，3倍屏下1px渲染为3物理像素，可以了解下px与dpi的关系~在2倍屏下，将1pxbordertransform:scale(0.5)在3倍屏下，将1pxbordertransform:scale(0.3333)