如何在移动端设置1px的border

在这里我只介绍下边框的实现：

实现原理：伪类+缩放

工具：stylus预编译器

1、在 stylus文件夹中创建mixin.styl文件，内容如下：（即通过伪类+子绝父相 实现1px的下边框，这只是开始，并没有结束 ）

border-1px($color)
position: relative
&:after
display: block
position: absolute
left: 0
bottom: 0
width: 100%
border-top:1px solid $color
content: ' '

2、在 stylus文件夹中创建base.styl文件，内容如下：（根据设备的dpr确定y轴的缩放比例）

@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)

3、在 stylus文件夹中创建index.styl文件，内容如下：（其中的icon为图标字体的样式）

@import './mixin'
@import './icon'
@import './base'

4、在main.js中引入

import
'./common/stylus/index.styl'

5、直接在class中使用'border-1px',即可实现1px的下边框（上，左，右边框可参考如上代码）

6、最后来看看区别：