如何在移动端设置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、最后来看看区别：

个人github：https://github.com/qiilee  欢迎follow