美文网首页
移动端一像素问题的解决方案

移动端一像素问题的解决方案

作者: mills_han | 来源:发表于2018-01-02 16:06 被阅读0次

    由于分辨率 DPI 的差异,高清手机屏上的 1px 实际上是由 2×2 个像素点来渲染,有的屏幕甚至用到了 3×3 个像素点

    所以在实际的代码实现中,设置1px的边框,会渲染成2px.

    虽然这一像素的差别,用户在实际体验中是很难察觉到的,但是作为一个具备‘像素眼’的前端来说,这是不可容忍的。
    解决办法:

    一、使用transform: scale

    先使用伪类 :after 或者 :before 创建 1px 的边框,然后通过 media 适配不同的设备像素比,然后调整缩放比例,从而实现一像素边框

    .border-bottom{
        position: relative;
    }
    .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);
        }
    }
    

    二、也可以偷懒使用图片代替,不过这个嘛。。你懂得

    三、或者,直接rem设置。

    相关文章

      网友评论

          本文标题:移动端一像素问题的解决方案

          本文链接:https://www.haomeiwen.com/subject/biqqnxtx.html