前端 移动端中1px 线条变粗解决方案

如果我们直接在CSS中设置边框的宽度为1px，实际上在设备上显示的并不是1px, 这是因为不同的手机有着不同的像素密度

解决方法：伪元素 + tranform: scaleY

这种方法是比较常用，兼容性也比较好的，利用高度为1px的伪元素来模拟边框
在媒体查询中利用tranform: scaleY来进行缩放，需要设置transform: origin(0, 0)保证缩放时伪元素距离父元素的距离

h1 {
  position: relative;
}

h1:after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: 0;
  background: red;
  transform: scaleY(1);
  transform-origin: 0 0;
}

@media screen and (min-device-pixel-ratio: 2),  (-webkit-min-device-pixel-ratio: 2) {
  h1:after {
    transform: scaleY(0.5);
  }
}