移动端像素问题有很多,最明显的就是苹果的视网膜屏,但也可以通过像素比的属性来解决。
即min-device-pixel-ratio
话不多说直接上代码。(此处用了css预处理器stylus,但解决的方式并没有变化)
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
.border-1px
border-1px($color)
position: relative
&::after
display: block
position: absolute
left: 0
bottom: 0
100%
border-top: 1px solid $color
content: ''
-webkit-transform :scaleY(0.7)
transform: scaleY(0.7)
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
.border-1px
border-1px($color)
position: relative
&::after
display: block
position: absolute
left: 0
bottom: 0
100%
border-top: 1px solid $color
content: ''
-webkit-transform :scaleY(0.5)
transform: scaleY(0.5)