移动端 1px

作者: imjcw | 来源:发表于2019-10-23 06:44 被阅读0次

前端遇到的那些技术难点及性能优化之css篇
H5-移动端小于1px的处理
1px像素问题
vue面试题第十三天
移动端适配1px的问题
移动端适配及1px边框问题
web前端面试题@十八（移动端1px问题，为什么会有？如何解决？
1px
移动端 1px
移动端1px

因为移动端设备 dpr (物理像素)的缘故，导致 1px 在移动端会变成 2px 的情况，可以通过 伪类 + 缩放 来解决 1px 的问题。

具体代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>1px</title>
    <style type="text/css">
        .bottom-1px, .top-1px {
            position: relative
        }
        .bottom-1px:after, .top-1px:before {
            position: absolute;
            left: 0;
            bottom: 0;
            display: block;
            width: 100%;
            border-top: 1px solid #efefef;
            content: ''
        }
        .top-1px:before {
            top: 0;
        }
        @media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5) {
            /**
             * 1.5*0.666
             */
            .bottom-1px:after, .top-1px:before {
                -webkit-transform: scaleY(0.666);
                transform: scaleY(0.666)
            }
        }
        @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
            /**
             * 2*0.5
             */
            .bottom-1px:after, .top-1px:before {
                -webkit-transform: scaleY(0.5);
                transform: scaleY(0.5)
            }
        }
    </style>
</head>
<body>
<div class="bottom-1px">
    aaaaa
</div>
<div>bbbbb</div>
<div class="top-1px">
    ccccc
</div>
</body>
</html>