在實際開發中，不知您遇到過這樣的問題嗎？明明寫的是1px，但是在手機上看起來卻是2px,為此深受困擾吧。下面就是我在工作中使用的解決方法哦，希望對大家有所幫助。

移動端上邊框和下邊框的實現：

border-t-1px($color)
  position: relative
&::before
display: block
position: absolute
left:0
top:0
width:100%
    border-top:1px solid $color
content:' '
border-b-1px($color)
  position: relative
&::after
 
display: block
position: absolute
left:0
bottom:0
width:100%
    border-top:1px solid $color
content:' '

@media(-webkit-min-device-device-pixel-ratio: 1.5),(min-device-device-pixel-ratio: 1.5)
  .border-t-1px
    &::before
-webkit-transform: scaleY(0.7)
      transform:scaleY(0.7)
@media(-webkit-min-device-device-pixel-ratio
 
: 2),(min-device-device-pixel-ratio: 2)
  .border-t-1px
    &::before
-webkit-transform: scaleY(0.5)
      transform:scaleY(0.5)
@media(-webkit-min-device-device-pixel-ratio: 2.5),(min-device-device-pixel-ratio: 2.5)
  .border-t-1px
    &::before
-webkit-transform: scaleY(0.33333334)
      transform
 
:scaleY(0.33333334)
@media(-webkit-min-device-device-pixel-ratio: 1.5),(min-device-device-pixel-ratio: 1.5)
  .border-b-1px
    &::after
-webkit-transform: scaleY(0.7)
      transform:scaleY(0.7)
@media(-webkit-min-device-device-pixel-ratio: 2),(min-device-device-pixel-ratio: 2)
  .border-b-1px
    &::after
-webkit-transform: scaleY(0.5)
      transform:scaleY(0.5)
@media(-webkit-min-device-device-pixel-ratio: 2.5),(min-device-device-pixel-ratio: 2.5)
  .border-b-1px
    &::after
-webkit-transform: scaleY(0.33333334)
      transform:scaleY(0.33333334)