移动端一像素问题

最近我发现移动端中的一像素会有bug,为什么呢?我发现在测试时候,不同大小的手机一像素的边框会随屏幕变化。虽然不是很大的问题,但我发现面试的时候也会问,所以我就查找了一些回答来总结一下。

  1. 可以用缩小放大transform中的scale来实现:
    .border-bottom{
        position: relative;
        border-top: none !important;
    }
    
    .border-bottom::after {
        content: " ";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background-color: #e4e4e4;
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
    }

    然后通过媒体查询

    /* 2倍屏 */
    @media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
        .border-bottom::after {
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
        }
    }
    
    /* 3倍屏 */
    @media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
        .border-bottom::after {
            -webkit-transform: scaleY(0.33);
            transform: scaleY(0.33);
        }
    }

    其实是一像素的高度的块级元素。

  2. 第二种的方法很简单,就用一像素的图片来替代。
    .border-image-1px {
        border-width: 1px 0px;
        -webkit-border-image: url("##") 2 0 stretch;
    }

     

©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页