移动端实现 1px 边框

不同设备的dpi不同 所以1px 像素 在不同设备上展现的尺寸不同要想实现1px边框要使用css3 的缩放

具体代码如下

<div class="tab s">
   <router-link class="tab-item" to='goods'>商品</router-link>
   <router-link class="tab-item" to='ratings'>评论</router-link>
   <router-link class="tab-item" to='sell'>商家</router-link>
</div>
    
<style>
 //针对不同的设备 设置缩放

@media (-webkit-device-pixel-ratio:1.5),(device-pixel-ratio:1.5)
 .s
   -webikt-transform: scale(0.7)


@media (-webkit-device-pixel-ratio:2),(device-pixel-ratio:2)
 .s
   -webikt-transform: scale(0.5)  

// 用伪类设置一个边框  这里使用了 mixin 函数提高代码复用性
border-1px($color)
   position: relative
   &:after
      display: block
      position: absolute
      left: 0
      bottom: 0
      width: 100%
      border-top: 1px solid $color
      content: '

.tab    
  border-1px(rgb(22,22,33))
</style>