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

}

Answer 1

在 2 倍屏下 1px 渲染为 2 物理像素，3 倍屏下 1px 渲染为 3 物理像素，可以了解下 px 与 dpi 的关系~

在 2 倍屏下，将 1px border transform: scale(0.5)
在 3 倍屏下，将 1px border transform: scale(0.3333)

Answer 2

移动端1px单面边框（很久以前记的笔记，试试看）

    /* 上 */.borderTop:before {content:"";position:absolute;z-index:2;left:0;top:0;height:1px;width:100%;border-top:1px solid #ccc;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scaleY(.5);transform:scaleY(.5);}
    /* 下 */.borderBottom:after {content:"";position:absolute;z-index:2;left:0;bottom:0;height:1px;width:100%;border-bottom:1px solid #ccc;-webkit-transform-origin:0 100%;transform-origin:0 100%;-webkit-transform:scaleY(.5);transform:scaleY(.5);}
    /* 左 */.borderLeft:before {content:"";position:absolute;z-index:2;left:0;top:0;height:100%;width:1px;border-left:1px solid #ccc;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scaleX(.5);transform:scaleX(.5);}
    /* 右 */.borderRight:after {content:"";position:absolute;z-index:2;right:0;top:0;height:100%;width:1px;border-right:1px solid #ccc;-webkit-transform-origin:100% 0;transform-origin:100% 0;-webkit-transform:scaleX(.5);transform:scaleX(.5);}