移动端border-1px 处理问题

为什么80%的码农都做不了架构师？>>>   

stylus代码：

  /* 主要解决1px 缩放问题 */ 
@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)

border-1px($color) // $color为参数
  position: relative
  &:after
    /* after相对于border绝对定位 */
    display: block
    position: absolute
    width: 100%
    left: 0
    bottom: 0
    border-top: 1px solid $color
    content: ' '

使用方法：

<style lang="stylus" rel="stylesheet/stylus">
  @import './common/stylus/mixin.styl' // 引入上方的代码

  .tab
    display: flex
    width:100%
    height:40px
    line-height:40px
    //border-bottom: 1px solid rgba(7,17,27,0.1)
    border-1px(rgba(7,17,27,0.1)) //使用传入颜色
</style>

 

转载于:https://my.oschina.net/lpcysz/blog/1927512