1畫素邊框問題

這個預設是移動端的問題了。由於移動端一般都會設定螢幕寬度為裝置寬度，width=device-width,initial-scale=1, 而有些螢幕是2倍屏，導致在移動端上設定1px就是看上去的2px。

解決方法：

• 通過transform將寬度縮小一半，transform:scaleY(0.5)
• 通過@media媒體查詢，查詢當前設定的螢幕倍率，統一設定transform, 參考: 移動端(手機)1畫素邊框真正實現
• 模仿淘寶(不確定是不是來自淘寶的)，設定螢幕寬度為設計師的設計尺寸(一般為750)。

  <meta name="viewport" content="width=750, user-scalable=no"
   
  >

由於移動端不同裝置的dpr不同，所以1px邊框的設計如下

dpr:物理畫素與裝置畫素比

border-1px($color)
   position: relative
   &::after
     dispaly:block
     position:absolute
     left: 0
     bottom:0//定位到元素下面
     width:100%//相對於父元素是100%寬度
     border-bottom:1px solid $color
     content:'

使用函式：函式所在位置 即為 函式中程式碼所在位置

以下針對不同dpr進行縮放

@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)