移动端存在设备像素比devicePixelRatio(简称DPR),所以在电脑端设置:
border-bottom: 1px solid red
在PC端是1px,但是在手机端的显示就是2px或则更多。
大多数的手机min-device-aspect-ratio值是1.5或则是2.0.所以代码如下:
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-aspect-ratio: 1.5)
.border-1px
&::after
-webkit-transform : scaleY(0.7)
transform: scaleY(0.7)
@media (-webkit-min-device-pixel-ratio: 2),(min-device-aspect-ratio: 2)
.border-1px
&::after
-webkit-transform : scaleY(0.5)
transform: scaleY(0.5)
border-1px($color)
position: relative
&:after
display: block
position: absolute
left: 0
bottom: 0
width: 100%
border-top: 1px solid $color
content: ''
注:样式是采用stylus语法来编写的。