關於移動端1px的解決方法

時間 2019-12-05

標籤關於移動 1px 解決方法欄目無線简体版

原文原文鏈接

使用僞類:after,:before和transform：scale()實現web

border-box{
    position:relative;
}
.border-box:after{
        content:'';
        position:absolute;
        bottom:0;
        left:0;
        width:100%;
        border-top:1px solid #ddd;
     }
@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){
    .border-box:after{
       
        transform:scaleY(0.5);
        -webkit-transform:scaleY(0.5);
     }
 } 
@media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3){
    .border-box:after{
       
        transform:scaleY(0.3);
        -webkit-transform:scaleY(0.3);
     }
 }