移动端1px实现和问题踩坑

淡淡的烟草味﹌ 2022-11-11 05:18 191阅读 0赞

# 效果 #

要实现移动端上的一像素线，

window.devicePixelRatio=物理像素 /CSS像素  
目前主流的屏幕DPR=2或者3。拿2倍屏来说，设备的物理像素要实现1像素，而DPR=2，  
所以css 像素只能是 0.5。  
一般设计稿是按照750来设计的，它上面的1px是以750来参照的，而我们写css样式是以设备375为参照的，所以我们应该写的**0.5px**

先看看效果：

Chrome浏览器PC

![image.png][]

![image.png][image.png 1]

Chrome浏览器移动端

![image.png][image.png 2]

IE浏览器下，显示问题

![image.png][image.png 3]

# 实现代码 #

## 1、0.5px ##

.box1 {
        width: 0.5px;
        height: 100px;
        border-right: black 1px solid;
    }

## 2、transform: scaleX(0.5); ##

.box3 {
        width: 1px;
        height: 100px;
        position: relative;
    }
    
    .box3:after {
        content: '';
        position: absolute;
        width: 1px;
        width: 2px\0;
        height: 100%;
        top: 0;
        right: 0;
        -webkit-transform: scaleX(0.5);
        -moz-transform: scaleX(0.5);
        -o-transform: scaleX(0.5);
        transform: scaleX(0.5);
        -webkit-transform-origin: left top;
        /*设置旋转元素的基点位置*/
        -moz-transform-origin: left top;
        -o-transform-origin: left top;
        transform-origin: left top;
        background: black
    }

## 3、利用0.5px的线图片 ##

.box4 {
        width: 1px;
        height: 100px;
        position: relative;
    }
    
    .box4:after {
        content: '';
        position: absolute;
        left: 0;
        width: 100px;
        height: 1px;
        background: url('../assets/imgs/问题&&解决/xian.png') 0 0 repeat-x;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
    
        -webkit-transform-origin: left top;
        /*设置旋转元素的基点位置*/
        -moz-transform-origin: left top;
        -o-transform-origin: left top;
        transform-origin: left top;
    }

# 问题 #

1.  直接写0.5px不起作用
2.  利用 transform: scaleX(0.5)实现在IE浏览器上出现显示问题

如图：第三根线，显示不出来

![image.png][image.png 4]

## 解决 transform方法兼容性 ##

### 1.媒体查询min-device-pixel-ratio ###

用min-device-pixel-ratio判断，如果设备像素比例大于2，再设置transform: scaleX(0.5);

.box5 {
        width: 1px;
        height: 100px;
        position: relative;
    }
    
    .box5:after {
        content: '';
        position: absolute;
        width: 1px;
        height: 100%;
        top: 0;
        right: 0;
        background: black
    }
    
    @media only screen and (-webkit-min-device-pixel-ratio: 2),
    (min-device-pixel-ratio: 2) {
        .box5:after {
            content: '';
            position: absolute;
            width: 1px;
            height: 100%;
            top: 0;
            right: 0;
            -webkit-transform: scaleX(0.5);
            -moz-transform: scaleX(0.5);
            -o-transform: scaleX(0.5);
            transform: scaleX(0.5);
            -webkit-transform-origin: left top;
            /*设置旋转元素的基点位置*/
            -moz-transform-origin: left top;
            -o-transform-origin: left top;
            transform-origin: left top;
            background: black
        }
    }

### 2.媒体查询max-width ###

用max-width判断，如果小于800px，则判定为移动端，再设置transform: scaleX(0.5);

.box6 {
        width: 1px;
        height: 100px;
        position: relative;
    }
    
    .box6:after {
        content: '';
        position: absolute;
        width: 1px;
        height: 100%;
        top: 0;
        right: 0;
        background: black
    }
    
    @media screen and (max-width: 800px) {
        .box6:after {
            content: '';
            position: absolute;
            width: 1px;
            height: 100%;
            top: 0;
            right: 0;
            -webkit-transform: scaleX(0.5);
            -moz-transform: scaleX(0.5);
            -o-transform: scaleX(0.5);
            transform: scaleX(0.5);
            -webkit-transform-origin: left top;
            /*设置旋转元素的基点位置*/
            -moz-transform-origin: left top;
            -o-transform-origin: left top;
            transform-origin: left top;
            background: black
        }
    }

# 拓展 #

其他移动端1px解决方案

*  box-shadow
 *  设置viewport的scale值

[本文链接：https://blog.csdn.net/qq\_39903567/article/details/115004404][https_blog.csdn.net_qq_39903567_article_details_115004404]

[image.png]: /images/20221022/8945c0929249440d9b19a74a399f9905.png
[image.png 1]: /images/20221022/ae0ddffc83d047029f14a8aeb908485a.png
[image.png 2]: /images/20221022/7f8dba63e9f14465a9d3ae33e7d6c5c1.png
[image.png 3]: /images/20221022/26935fbd4109498380f49d8286ab2bac.png
[image.png 4]: /images/20221022/87caa63998f14335a1452ff393c2f868.png
[https_blog.csdn.net_qq_39903567_article_details_115004404]: https://blog.csdn.net/qq_39903567/article/details/115004404