移动1像素的问题

问题：一般在移动端，由于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之间的手机型号

参考：https://segmentfault.com/a/1190000009279775