关于设备像素比的知识,想必做过移动端开发的都有接触,这里就不介绍啦,万一有不懂的可以看张鑫旭大神的设备像素比devicePixelRatio简单介绍

由于设备像素比存在的原因,我们在处理设计图的一些边框时,对于1px的border,如果在代码里将其写死,可能在不同设备像素比的设备中,粗细不一样,尤其是在目前大多数设备像素比为2的设备中,过粗。

那么利用媒体查询和”min-device-pixel-ratio”就可以轻松的搞定,实现货真价实的1px border。

styl代码如下:

mixin.styl

border-1px($color)
position: relative
&:after
display: block
position : absolute
left: 0
bottom: 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)
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)

App.vue
<div class="tab border-1px">
<div class="tab-item">
<router-link to="/goods"> 商品</router-link>
</div>
<div class="tab-item">
<router-link to="/ratings">评论</router-link>
</div>
<div class="tab-item">
<router-link to="/sellers">商家</router-link>
</div>
</div>


<style lang="stylus" rel="stylesheet/stylue">
@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)

</style>