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

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理