border-1px的实现（stylus）如何在移动端设置1px的border

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

当样式像素一定时,因手机有320px,640px等.各自的缩放比差异,所以设备显示像素就会有1Npx，2Npx.为保设计稿还原度,解决就是用media + scale.

实现原理：伪类+缩放

工具：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中引入

//  相同不加./绝对路径引用去webpack.base.conf.js配置 'common':path.resolve(__dirname,'../src/common')

　　import 'common/stylus/index.styl'