移动前端设置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)