鍍金池/ 問答/Java  HTML/ 移動前端設(shè)置border為1px顯得粗

移動前端設(shè)置border為1px顯得粗

我找到過方法，但是不知道怎么用，代碼如下：
%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);
    }
}

}

回答
編輯回答
朕略萌

在 2 倍屏下 1px 渲染為 2 物理像素，3 倍屏下 1px 渲染為 3 物理像素，可以了解下 px 與 dpi 的關(guān)系~

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

2018年2月11日 14:13
編輯回答
影魅

移動端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);}
2017年5月6日 23:55