移动端border-1px实现

在PC端1px没问题，手机端存在设备像素比dpr（device pixel ratio），在dpr为2的Ritina屏幕上，即在一个方向上2个设备像素长度表明1个CSS像素长度，1px在手机屏幕上会显示为2px。

解决办法：

step1：在须要添加边框的元素末尾添加伪类

 1 // 函数
 2 border-1px($color)
 3   position: relative
 4   &::after
 5     content: ''
 6     display: block
 7     position: absolute
 8     left: 0
 9     bottom: 0
10     width: 100%
11     border-top: 1px solid $color

step2：公用样式中写入@media

1 .border-1px
2   @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5)
3     &::after
4       -webkit-transform: scaleY(0.7)
5       transform: scaleY(0.7)
6   @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2)
7     &::after
8       -webkit-transform: scaleY(0.5)
9       transform: scaleY(0.5)