移动端1像素边框问题处理代码学习

慕课网饿了么项目骨架搭建时，关于1像素边框处理代码如下：

App.vue里面：

<style  lang='stylus' rel='stylesheet/stylus'>
  @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) // router里面传递了参数linkActiveClass: 'active'
</style>

mixin.styl里面：

border-1px($color)
  position: relative//子绝父相
  &::after//在父元素后加上内容，对应下边框。
    display: block
    position: absolute
    left: 0
    bottom: 0//下边框距离为0
    width: 100%
    border-bottom: 1px solid $color
    content: ''
  &::before//在父元素前加上内容，对应上边框。
    display: block
    position: absolute
    left: 0
    top: 0//上边框距离为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)//0.7*1.1.05约等于1
      transform: scaleY(0.7)//上下边框，缩放只存在于Y轴
    &::before
      -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)//0.5*2=1倍大小。
      transform: scaleY(0.5)//上下边框，缩放只存在于Y轴
    &::before
      -webkit-transform: scaleY(0.7)
      transform: scaleY(0.7)

通过index.styl一次性引入：

@import "./mixin"
@import "./base"
@import "./icon"

main.js里面导入：

import Vue from 'vue'
import App from './App'
// 引入路由
import router from './router/router'
import './common/stylus/index.styl'

let vm = new Vue({
  router, // 注入到根实例中
  el: '#app',
  render: h => h(App)
})

Vue.use({vm})