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

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

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);
     }
 }  
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章