移動端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)