604 阿里云技术社区[云栖]

手机实现1像素边框显示

问题需求：页面设置边框1像素时，电脑端显示是正常的，手机端会显示比正常粗一点。

1、给需要显示1像素边框的元素添加伪类元素，设置边框为1px。注意：这个时候和直接在元素本身设置边框是一样的效果，达不到真正显示1像素的问题。

2、然后用media 媒体查询，设置伪类元素的缩放比例。

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
.border-1px::after{
-webkit-transform: scaleY(0.7);
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
.border-1px::after{
-webkit-transform: scaleY(0.5);
}
}

3、完整示例

html
<div class="tab border-1px"></div>
css
.tab{
display:flex;
width:100%;
height:40px;
line-height:40px;
position:relative;
}
.tab:after{
display:block;
position:absolute;
width:100%;
left:0;
bottom:0;
border-top:1px solid rgba(7,17,27,0.1);
content:'';
}
base.css
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
.border-1px::after{
-webkit-transform: scaleY(0.7);
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
.border-1px::after{
-webkit-transform: scaleY(0.5);
}
}

最后更新：2017-07-10 16:32:30