問題：一般在移動端，由於dpr（裝置畫素比）不為1，在PC端顯示1畫素的邊框，在移動端其實顯示為2px。解決這個問題，主要思想是：使用偽元素設定1px的邊框，然後使用媒體查詢，根據dpr的大小，對邊框進行縮放（scaleY）。詳細程式碼如下所示：
App.vue:

<template>
  <div id="app">
    <div class="tab border-1px"> <!-- !!!!!!! -->
      <div class="tab-items">
        <router-link  to
 
="/goods">商品</router-link>
      </div>
      <div class="tab-items">
         <router-link  to="/ratings">評價</router-link>
      </div>
      <div class="tab-items">
        <router-link  to="/seller">商店</router-link>
      </div>
    </div>
 

    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script></script>

<style lang="stylus" rel="stylesheet/stylus">
@import "./common/stylus/mixin.styl"
@import "./common/stylus/base.styl"
#app
  .tab
    display: flex
    width: 100
 
%
    height: 40px
    line-height: 40px
    border-1px(blue)  /*!!!!!!*/
    .tab-items
      flex: 1
      text-align: center
      font-size: 14px
      & > a
        display: block
        width: 100%
        color: rgb(77, 85, 93)
        &.router-link-active
          color: rgb(240, 20, 20)
  .seller
    border-bottom: 1px solid blue  /*用於對比，在移動端實際顯示2px*/
</style>

mixin.styl:

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

//圖片的mixin，根據圖片的不同dpr進行適配下顯示高清問題
bg-image($url) 
  background-image: url($url + "@2x.png")
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
    background-image: url($url + "@3x.png")

• 這裡的border-1px($color) 就是真正處理1畫素邊框問題的關鍵，通過偽元素after重做border，並且支援傳入顏色變數$color來自定義顏色。
• 這裡的bg-image($url) 是負責處理圖片在不同dpr下顯示的問題，原來跟1畫素邊框問題差不多，不過這裡不需要重做，只是根據不同的media query來呼叫不同的圖片顯示，而這些圖片是需要放在相對應的資料夾的。

base.styl： 進行縮放

<!--這裡是對於使用reset.css之後的一些自定義的預設的css初始化-->
<!--設定一些移動端比較流行的字型-->
<!--其他都是為了方便開發,避免css的屬性繼承影響模組的程式碼-->
body, html
  line-height: 1
  font-weight: 200
  font-family: 'PingFang SC', 'STHeitiSc-Light', 'Helvetica-Light', Arial, sans-serif

<!--根據媒體查詢@media設定不同的縮放比例(transform 的 scale)來修復1畫素邊框的問題-->
@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)

• 這裡的修復1畫素邊框問題會拆分為2個部分，一個部分是這裡的base.styl裡面處理縮放，另外一部分是在mixin.styl裡面處理重做border。
• 這裡是一個base模組檔案，只保留了基本的共用的css，需要結合其他的css檔案(stylus)來合併理解
• dpr一般是1或者2，1.5只是為了更精細的去適配1和2之間的手機型號