当前位置:首页 > 移动开发 > 正文

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

2024-03-31 移动开发

.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);
    }
}
  

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/yidong/18956.html