使用min-device-pixel-ratio媒体功能实现真正的1像素border

关于设备像素比的知识，想必做过移动端开发的都有接触，这里就不介绍啦，万一有不懂的可以看张鑫旭大神的设备像素比devicePixelRatio简单介绍

由于设备像素比存在的原因，我们在处理设计图的一些边框时，对于1px的border，如果在代码里将其写死，可能在不同设备像素比的设备中，粗细不一样，尤其是在目前大多数设备像素比为2的设备中，过粗。

那么利用媒体查询和”min-device-pixel-ratio”就可以轻松的搞定，实现货真价实的1px border。

styl代码如下：

mixin.styl

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

base.styl

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

App.vue

<div class="tab border-1px">
  <div class="tab-item">
    <router-link to="/goods"> 商品</router-link>
  </div>
  <div class="tab-item">
    <router-link to="/ratings">评论</router-link>
  </div>
  <div class="tab-item">
    <router-link to="/sellers">商家</router-link>
  </div>
</div>

<style lang="stylus" rel="stylesheet/stylue">
  @import "./common/stylus/mixin.styl"

  .tab
    display: flex
    width: 100%
    height: 40px
    line-height: 40px
    border-1px(rgba(7,17,27,0.1))
    .tab-item
      flex: 1
      text-align: center
      & > a
        display: block
        font-size: 14px
        color: rgb(77,85,93)
        &.active
          color: rgb(240,20,20)

</style>