移动端适配1px的方法

为什么移动端css里面写了1px, 实际看起来比1px粗

 

 

 像这样就很粗，我们可以利用伪类 + transform 实现实现

 

 

 这样的效果

原理是把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border ，并 transform 的 scale 缩小一半，原先的元素相对定位，新做的 border 绝对定位。

.line {
    margin: .2rem .3rem;
    position: relative;
    border:none;
}
.line::after{
  content: '';
  position: absolute;
  bottom: 0;
  background: #0C7BE3;
  width: 100%;
  height: 1px;
  -webkit-transform: scaleY(0.6);
  transform: scaleY(0.6);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}