本文介绍了一种在移动端实现清晰1px边框的方法，通过使用媒体查询结合transform属性，确保不同设备下都能获得良好的视觉效果。
移动端 /* 1px */
.border-1px{
position: relative;
}
.border-1px:after{
position:absolute;
width:100%;
display:block;
left:0;
bottom:0;
content:'';
border:1px solid #f0f0f0;
}
@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);
}
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
