使用stylus实现移动端1像素线

在mixin.stylus中定义公共函数

 1 border-1px($color)
 2     position: relative
 3     &:after
 4         display: block
 5         position: absolute
 6         left: 0
 7         bottom: 0
 8         width: 100%
 9         border-top: 1px solid $color
10         content: ''

在base.stylus中定义不同dpi设备下的缩放比例

 1 @media (-webkit-min-device-pixel-ratio:1.5) , (min-device-pixel-ratio:1.5)
 2     .border-1px
 3         &::after
 4             -webkit-transform: scaleY(0.7)
 5             transform: scaleY(0.7)
 6 @media (-webkit-min-device-pixel-ratio:2) , (min-device-pixel-ratio:2)
 7     .border-1px
 8         &::after
 9             -webkit-transform: scaleY(0.5)
10             transform: scaleY(0.5)

在vue组件中使用border-1px函数

 1 @import '~common/stylus/mixin.styl';
 2   .tab
 3     display: flex
 4     width: 100%
 5     height: 40px
 6     line-height 40px
 7     border-1px(rgba(7,17,27,0.1))
 8     .tab-item
 9       flex-grow: 1
10       text-align: center

 

posted @ 2019-09-11 10:45  mchtig  阅读(214)  评论(0)  编辑  收藏  举报