移动端1像素解决方法，根据媒体查询transform缩放

Posted 2021-05-07 binmengxue

.borderOnePx{
   position: relative;
}
.borderOnePx::after {
    content: ‘‘;
    height:1px;
    background:#000;
    -webkit-transform: scaleY(0.5);
    -webkit-transform-origin:0 0;
    overflow: hidden;
}
/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
    .borderOnePx::after {
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
}

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