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

.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);
    }
}
  
posted @ 2019-10-10 10:18  归尘2016  阅读(415)  评论(0编辑  收藏  举报