1像素问题 & 混合器@mixin & 设备像素比dpr & 媒体查询@media

1像素问题产生的原因：

不同的设备像素比（dpr ，全称devicePixelRatio）导致的，比如dpr=2，那么在设备上就会占用2个物理像素去展示 css 里面的1个像素。

如图，可在后台查看不同设备的dpr：

解决办法：

• 以上图灰色边线（border:1px solid #e8e8e8）为例，试着把1px的边线封装成一个方法，可以用伪元素：：before来模拟border。
• 用媒体查询 @media 来处理，在css里面区别（读取）不同设备的参数，写出不同的样式。
• 定义混合指令 @mixin （混合器）来混合样式。 Sass中文文档
• 引用混合样式 @include ，哪儿用写哪儿。Sass快速入门

// 文件mixin.scss
// 设备像素比devicePixelRatio
// 把1px的边线封装成一个方法
// 媒体查询 @media
// 混合器 @mixin
// 定义混合样式border_1px($color)
// 下面是常见的三种设备像素比：1.5 、 2 、 3  ，分别给了处理

@mixin border_1px($color) {
    @media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5) {
        // webkit内核版                             普适版
        position: relative;
        &::before{
            // 伪元素，放在父元素最前面的
            content: " ";
            position: absolute;
            left: 0;
            top: 0;
            background-color: $color;
            width: 100%;
            height: 1px;
            /*缩放，根据不同的设备像素比，有不同的缩放比例，scaleY(1/dpr) */
            transform: scaleY(0.667);
        }
    }
    @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
        // webkit内核版                             普适版
        position: relative;
        &::after{
            // 伪元素
            content: " ";
            position: absolute;
            left: 0;
            top: 0;
            background-color: $color;
            width: 100%;
            height: 1px;
            transform: scaleY(0.5);/*缩放*/
        }
    }
    @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {
        // webkit内核版                             普适版
        position: relative;
        &::after{
            // 伪元素
            content: " ";
            position: absolute;
            left: 0;
            top: 0;
            background-color: $color;
            width: 100%;
            height: 1px;
            transform: scaleY(0.333);/*缩放*/
        }
    }
}

然后把封装这个函数的文件导入要使用的.css文件里：
@import "./mixin.scss";
然后使用的时候在相关位置引入：
@include border_1px(#e8e8e8);//引用混合样式