移動端1px邊框的解決方案

因爲設備像素比不同，邊框的大小在不同的設備上也不同

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

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

主要代碼是給一個元素添加一個僞類 內容爲空 然後在media裏面根據縮放比例更改scaleY 邊框的大小=scalyY*縮放比例
由於最近用到的是stylus 語法上與style有些不同 各位可適當參考