前端移動端1像素問題

原因

主要原因是css像素與物理像素的區別

首先說一個概念：dpr

dpr,即device pixel ratio,設備像素比

不同的設備具有不同的像素比，dpr決定了由設備的多少個物理像素顯示web css的一個像素

比如dpr為2時，設備上由2個像素表現css上的一個像素

解決1px border問題

知道了1像素問題產生的原因后，解決它也就是個水到渠成的過程了

要想達到1px效果,只需要查詢當前設備的dpr,再根據dpr進行縮放即可

例如縱軸縮放處理1px border代碼如下

@mixin border_1px($color) {
    //設置父元素相對定位，否則子元素是個根節點
    position: relative;
    //媒體查詢
    @media(-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5)  {
        &::before{
            content: ' ';
            position: absolute;
            left:0px;
            top: 0px;
            background-color: $color;
            height: 1px;
            width: 100%;
            //核心,1px/像素比
            transform: scaleY(0.667);
        }
    }
    @media(-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2)  {
        &::before{
            content: ' ';
            position: absolute;
            left:0px;
            top: 0px;
            background-color: $color;
            height: 1px;
            width: 100%;
            transform: scaleY(0.5);
        }
    }
    @media(-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3)  {
        &::before{
            content: ' ';
            position: absolute;
            left:0px;
            top: 0px;
            background-color: $color;
            height: 1px;
            width: 100%;
            transform: scaleY(0.333);
        }
    }
}