實現移動端設備1px邊框（sass）

1px邊框的問題

實際開發中，咱們會遇到一個問題，咱們設置的1px邊框在移動端設備中顯示的比正常的要粗一些。其緣由是由於，在移動端中邊框被放大了。

首先咱們要理解兩個概念：

邏輯像素：開發中的px，1px即表明一個邏輯像素

物理像素：屏幕的實際分辨率

像素比：邏輯像素/物理像素

例如iphone6的橫向的邏輯像素是375px,橫向分辨率是750，因此像素比就是2。 iphone6p的邏輯像素是414，分辨率是1242，因此他的像素比就是3。

在實際開發中咱們雖然設置了border:1px，可是在像素比爲2的屏幕中，1px的寬度顯示的是預想中的兩倍。

爲了解決這個問題，咱們能夠利用媒體查詢和min-device-pixel-ratio（獲取像素比），來實現貨真價實的1px border。

原來其實很簡單，在像素比爲2的時候，邊框會比原來的要寬，那咱們就設置縮放爲原來的0.5,讓它縮小一點。

代碼以下

$border-poses:top,
right,
bottom,
left;
$color:red;
@mixin border-1px($color:$color, $poses:$border-poses) {
    position: relative;
    &::after {
        content: '';
        display: block;
        position: absolute;
        width: 100%;
        @each $pos in $poses {
            border-#{$pos}: 1px solid $color;
            #{$pos}: 0;
        }
    }
}

@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); //像素比爲2的時候，咱們設置縮放爲0.5
        transform: scaleY(0.5);
    }
}
@media (-webkit-min-device-pixel-ratio:3),
(min-device-pixel-ratio: 3) {
    .border-1px &::after {
        -webkit-transform: scaleY(0.333333);//像素比爲3的時候，咱們設置縮放爲0.33333
        transform: scaleY(0.333333);
    }
}
複製代碼