移动端常见的1像素问题

1像素问题（移动端适配，设备像素比问题）

原因：不同的设备，不同的像素比（dpr）

第一步：单独建一个scss文件，来写重复的样式

@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;
transform: scaleY(0.75);
height:1px;
width: 100%;

    }
}
@media(-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){
    /* 伪元素 */
    &::before{
        content: "";
        position:absolute;
        left: 0px;
        top: 0px;
        background-color: $color;
        transform: scaleY(0.5);
        height:1px;
        width: 100%;
    }
}
@media(-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3){
    /* 伪元素 */
    &::before{
        content: "";
        position:absolute;
        left: 0px;
        top: 0px;
        background-color: $color;
        transform: scaleY(0.333);
        height:1px;
        width: 100%;
    }
}

}

第二步，然后通过@include放到你需要的地方调用它

.item{
display: flex;
padding: 0.15rem;
@include border_1px(#e8e8e8);
img{
height: 0.6rem;
width: 0.6rem;
}