移動端1px邊框解決方案

在retina屏中，像素比爲2(iPhone6/7/8)或3(iPhone6Plus/7Plus/8Plus)，1px的邊框看起來比真的1px更寬。

• 使用僞類加transform的方式

  元素自己不定義邊框，僞元素定義1px邊框，而且根據根據像素比值設置縮放比例，像素比爲3時設置爲0.33，像素比爲2時設置0.5。

HTML:
<div class="border-1px"></div>

CSS:
.border-1px {
    position: relative;
}

.border-1px:after {
    position: absolute;
    content: "";
    top: -50%;
    bottom: -50%;
    left: -50%;
    right: -50%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    border-top: 1px solid #666;
}

@media (-webkit-min-device-pixel-radio: 3), (min-device-pixel-radio: 3) {
    border-1px::after {
        -webkit-transform: scaleY(0.33333333);
        transform: scaleY(0.33333333);
    }
}

@media (-webkit-min-device-pixel-radio: 2), (min-device-pixel-radio: 2) {
    border-1px::after {
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
}

當直接設置邊框1px時

HTML:
<div class="border-1px"></div>

CSS:
.border-1px {
    border-top: 1px solid #666;
}

二者的最終效果以下(前者在iPhone6Plus/7Plus/8Plus模擬機上運行後者，在 iPhone6/7/8模擬機上運行)：