前端移动端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);
        }
    }
}