問題：一般在移動端，由于dpr（設備像素比）不為1，在PC端顯示1像素的邊框，在移動端其實顯示為2px。解決這個問題，主要思想是：使用偽元素設置1px的邊框，然后使用媒體查詢，根據dpr的大小，對邊框進行縮放（scaleY）。詳細代碼如下所示：
App.vue:
商品評價商店@import"./common/stylus/mixin.styl"@import"./common/stylus/base.styl"#app
.tab
display: flex
width:100%
height:40px
line-height:40pxborder-1px(blue)/*!!!!!!*/
.tab-items
flex:1text-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*/
mixin.styl:
border-1px($color)
position: relative&::afterposition: absolute
left:0bottom:0width: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：進行縮放
body, html
line-height: 1
font-weight: 200
font-family: 'PingFang SC', 'STHeitiSc-Light', 'Helvetica-Light', Arial, sans-serif@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之間的手機型號
