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