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

骑猪看日落 2023-07-13 13:48 96阅读 0赞

#### 1像素问题产生的原因： ####

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

如图，可在后台查看不同设备的dpr：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]

#### 解决办法： ####

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

// 文件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);//引用混合样式`

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]: /images/20230529/b20038acbc0543aea835064586cd8af0.png
[Sass]: https://www.sass.hk/docs/
[Sass 1]: https://www.sass.hk/guide/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 1]: /images/20230529/49ba437f07d345acb5eed1ba9ec6adb7.png