移动端1px边框问题

￡神魔★判官ぃ 2023-03-01 09:19 19阅读 0赞

## 解决方案一 ##

*  使用rem为单位。
 *  使用js获取dpr值动态计算视口缩放，设置viewport content属性。
 *  计算得到缩放比后，应该对应给html的font-size 乘 回缩放比。
 *  边框使用px为单位，其余元素均使用rem单位，这样视口的缩放就只会影响到px单位。
 *  **一劳永逸的解决方案**

## 解决方案二 ##

*  使用css3的媒体查询+transform的scale
 *  **单线解决方案**

## 解决方案三（推荐方案非常灵活） ##

*  使用css3的媒体查询+transform的scale
 *  **多边框实现，目前较为常见的解决方案**
 *  把需要使用到的边框全部提前定义好，使用时只需要写对应的class

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>边框1px</title>
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maixmum-scale=1.0,user-scalable=no">
        <style>
            *{
                margin:0;
                padding:0;
            }
            html,body{
                width:100%;
                height:100%;
            }
            .box{
                width: 200px;
                height: 200px;
                background: #ccc;
                margin-left: 10px;
                margin-top: 10px;
                margin-bottom: 20px;
            }
            .border,.border-left,.border-right,.border-top,.border-bottom{
                position: relative;
                border:none;
            }
            .border:after{
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                border: 1px solid #f00;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                width: 100%;
                height: 100%;
            }
            .border-left:after{
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                border-left: 1px solid #f00;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                width: 100%;
                height: 100%;
            }
            .border-right:after{
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                border-right: 1px solid #f00;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                width: 100%;
                height: 100%;
            }
            .border-top:after{
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                border-top: 1px solid #f00;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                width: 100%;
                height: 100%;
            }
            .border-bottom:after{
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                border-bottom: 1px solid #f00;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                width: 100%;
                height: 100%;
            }
            @media only screen and (-webkit-device-pixel-ratio:2){
                .border:after{
                    width: 200%;
                    height: 200%;
                    -webkit-transform: scale(0.5);
                    transform: scale(0.5);
                    -webkit-transform-origin: left top;
                    transform-origin: left top;
                }
                .border-left:after{
                    width: 200%;
                    height: 200%;
                    -webkit-transform: scale(0.5);
                    transform: scale(0.5);
                    -webkit-transform-origin: left top;
                    transform-origin: left top;
                }
                .border-right:after{
                    width: 200%;
                    height: 200%;
                    -webkit-transform: scale(0.5);
                    transform: scale(0.5);
                    -webkit-transform-origin: left top;
                    transform-origin: left top;
                }
                .border-top:after{
                    width: 200%;
                    height: 200%;
                    -webkit-transform: scale(0.5);
                    transform: scale(0.5);
                    -webkit-transform-origin: left top;
                    transform-origin: left top;
                }
                .border-bottom:after{
                    width: 200%;
                    height: 200%;
                    -webkit-transform: scale(0.5);
                    transform: scale(0.5);
                    -webkit-transform-origin: left top;
                    transform-origin: left top;
                }
            }
            @media only screen and (-webkit-device-pixel-ratio:3){
                .border:after{
                    width: 300%;
                    height: 300%;
                    -webkit-transform: scale(0.33333);
                    transform: scale(0.33333);
                    -webkit-transform-origin: left top;
                    transform-origin: left top;
                }
                .border-left:after{
                    width: 300%;
                    height: 300%;
                    -webkit-transform: scale(0.33333);
                    transform: scale(0.33333);
                    -webkit-transform-origin: left top;
                    transform-origin: left top;
                }
                .border-right:after{
                    width: 300%;
                    height: 300%;
                    -webkit-transform: scale(0.33333);
                    transform: scale(0.33333);
                    -webkit-transform-origin: left top;
                    transform-origin: left top;
                }
                .border-top:after{
                    width: 300%;
                    height: 300%;
                    -webkit-transform: scale(0.33333);
                    transform: scale(0.33333);
                    -webkit-transform-origin: left top;
                    transform-origin: left top;
                }
                .border-bottom:after{
                    width: 300%;
                    height: 300%;
                    -webkit-transform: scale(0.33333);
                    transform: scale(0.33333);
                    -webkit-transform-origin: left top;
                    transform-origin: left top;
                }
            }
        </style>
    </head>
    <body>
        <div class="box border">div</div>
        <div class="box border-left">div</div>
        <div class="box border-right">div</div>
        <div class="box border-bottom">div</div>
        
        <div class="border-bottom" style="width:100%;height: 1px;"></div>
    </body>
    </html>