解决移动端上1px的问题

时间:2022-06-22 17:49:22

一、伪类  transform

基于 media查询判断不同的设备像素比对线条进行缩放:

.border_1px:before{
     content: ‘‘;
     position: absolute;
     top: 0;
     height: 1px;
     width: 100%;
     background-color: #000;
     transform-origin: 50% 0%;
}

        
@media only screen and (-webkit-min-device-pixel-ratio:2){
     .border_1px:before{
            transform: scaleY(0.5);
     }
}

        
@media only screen and (-webkit-min-device-pixel-ratio:3){
      .border_1px:before{
            transform: scaleY(0.33);
      }
}

这种方式可以满足各种场景,如果需要满足圆角,只需要给伪类也加上 border-radius即可。

 二、SVG

借助 PostCSSpostcss-write-svg我们能直接使用 border-imagebackground-image创建 svg1px边框:

@svg border_1px {
  height: 2px;
  @rect {
    fill: var(--color, black);
    width: 100%;
    height: 50%;
    }
  }

.example {
 border: 1px solid transparent;
 border-image: svg(border_1px param(--color #00b1ff)) 2 2 stretch; 
}

这种方案基本可以满足所有场景,而且不需要外部引入。