【css】1像素的问题

在移动端设备中，很多css设置为1像素的border实际屏幕显示为2px或者3px。这种情况是什么原因呢？

主要原因是css像素与物理像素的区别

首先说一个概念：dpr

dpr，即device pixel ratio——设备像素比

不同的设备具有不同的像素比，dpr决定了由设备的多少个物理像素显示web css的一个像素

比如dpr为2时，设备上由2个像素表现css上的一个像素

解决1px border问题

要想达到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);

        }

    }

}