解决手机上1像素边框特别粗的问题

作者: 看庭前花开花落_望天上云卷云舒 | 来源:发表于2020-04-10 10:03 被阅读0次

直接上代码：哪里需要加边框直接加 boder-1px 这个样式就可以。亲测有效哦！

/* 处理手机一像素边框粗的问题 */
        .border-1px{
            position:relative
         }
        .border-1px::after{
            width:100%;
            display:block;
            position:absolute;
            left: 0;
            bottom: 0;
            border-bottom:1px solid #ccc;
            content:''
        }  
        @media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
            .border-1px::after{
                -webkit-transform:scaleY(0.7);
                transform:scaleY(0.7) 
            }
        }
        @media only screen and (-webkit-min-device-pixel-ratio: 2) {
            .border-1px::after{
               -webkit-transform:scaleY(0.5);
               transform:scaleY(0.5)
            }
        }