1px问题

1、伪类 +媒体查询控制transform

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

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

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