1px问题

1、伪类 + transform

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

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

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