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

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

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

实现原理：伪类+缩放

工具：stylus预编译器

一、在 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: ' '

　　

二、在 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)

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

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

四、在main.js中引入

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

　　import 'common/stylus/index.styl'