解决移动端上1px的问题

Posted 2020-12-02 pyip

一、伪类 + 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

借助 PostCSS的 postcss-write-svg我们能直接使用 border-image和 background-image创建 svg的 1px边框：

@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; 
}

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