不只限于Vue，适合所有移动端的开发
** 目录结构将是这样：**
├── common #包含公共的模块和资源，如fonts、js、stylus
| └── stylus #包含通用的样式
| ├── base.styl #通用的选择器样式
| └── mixin.styl #通用的混合书写样式
├── components #包含组件
| └── Hello.vue #某个组件
└── main.js #入口文件
</br>
** 假设有个Hello.vue页面，我用的是Stylus编写CSS： **
<template>
......
<div class="tab">假如这是个框</div>
......
</template>
......
<style lang="stylus" rel="stylesheet/stylus">
.tab
display: flex
width: 100%
height: 40px
line-height: 40px
</style>
如果想在边框下添加一条 1px 的线，通常在CSS里添加属性和值 border-bottom: 1px solid rgba(7, 17, 27, 0.1) 就能实现。
在PC端浏览这 1px 是真的 1px，但是在手机端浏览的话它就不是 1px，因为手机端有个DPR的概念，iPhone6 等高分辨率屏幕的物理像素是CSS像素的两倍，所以手机上看到是 2px 的线。
想实现移动端的 1px，在这主要是利用一个伪元素加它的缩放。
</br>
添加伪元素
为了让 1px 线条在项目中能够复用，把样式封装在一个函数并放在一个stylus文件里。
在stylus文件夹下新建 mixin.styl，用于存放通用的混合书写（像函数），定义好一个名叫 border-1px 的函数，设置一个颜色参数 $color，写好伪元素 :after 和样式 ，即设置一条线，相对于父元素是绝对定位 。
** mixin.styl： **
border-1px($color)
position: relative
&:after
display: block
position: absolute
left: 0
bottom: 0
width: 100%
border-top: 1px solid $color
content: ' '
</br>
Hello.vue 页面引入 mixin.styl，在要画边框的元素后面使用 border-1px(rgba(7, 17, 27, 0.1))
** Hello.vue CSS部分： **
<style lang="stylus" rel="stylesheet/stylus">
@import "../common/stylus/mixin.styl"
.tab
display: flex
width: 100%
height: 40px
line-height: 40px
border-1px(rgba(7, 17, 27, 0.1))
</style>
转译出来相当于：
<style lang="stylus" rel="stylesheet/stylus">
@import "../common/stylus/mixin.styl"
.tab
display: flex
width: 100%
height: 40px
line-height: 40px
position: relative
&:after
display: block
position: absolute
left: 0
bottom: 0
width: 100%
border-top: 1px solid rgba(7, 17, 27, 0.1)
content: ' '
</style>
</br>
通过class类给这个伪元素做一个缩放
先在stylus文件夹下新建 base.styl，用于存放通用的选择器。
添加类选择器 .border-1，通过Media Queries 让 .border-1 根据 DPR 去缩放，这样就可以达到 1px 的效果。
** base.styl： **
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
.border-1
&::after
-webkit-transform: scaleY(0.7)
transform: scaleY(0.7)
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
.border-1
&::after
-webkit-transform: scaleY(0.5)
transform: scaleY(0.5)
@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
.border-1
&::after
-webkit-transform: scaleY(0.3)
transform: scaleY(0.3)
</br>
如果想在全局都能使用class类为 border-1 的缩放样式， 就在入口文件引入 base.styl
** main.js： **
import './common/stylus/base.styl';
</br>
现在Hello.vue页面就能使用 border-1样式了，在要画线的元素内添加class类 border-1
** Hello.vue HTML部分： **
<template>
......
<div class="tab border-1">假如这是个框</div>
......
</template>
</br>
其实可以把 border-1px($color)的样式写在 .border-1类里，不过会使得代码重复，也不利于维护，所以分离出可复用的 border-1px($color)
</br>
