关于移动端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);
     }
 }