Vue新增通用样式：手机端显示1px线

不只限于Vue，适合所有移动端的开发

** 目录结构将是这样：**

├── common                #包含公共的模块和资源，如fonts、js、stylus
|   └── stylus            #包含通用的样式
|       ├── base.styl     #通用的选择器样式
|       └── mixin.styl    #通用的混合书写样式
├── components            #包含组件
|   └── Hello.vue         #某个组件
└── main.js               #入口文件

** 假设有个Hello.vue页面，我用的是Stylus编写CSS： **

......

如果想在边框下添加一条 1px 的线，通常在CSS里添加属性和值 border-bottom: 1px solid rgba(7, 17, 27, 0.1) 就能实现。

在PC端浏览这 1px 是真的 1px，但是在手机端浏览的话它就不是 1px，因为手机端有个DPR的概念，iPhone6 等高分辨率屏幕的物理像素是CSS像素的两倍，所以手机上看到是 2px 的线。

想实现移动端的 1px，在这主要是利用一个伪元素加它的缩放。

添加伪元素

为了让 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: ' '

Hello.vue 页面引入 mixin.styl，在要画边框的元素后面使用 border-1px(rgba(7, 17, 27, 0.1))
** Hello.vue CSS部分： **

转译出来相当于：

通过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)

如果想在全局都能使用class类为 border-1 的缩放样式， 就在入口文件引入 base.styl
** main.js： **

import './common/stylus/base.styl';

现在Hello.vue页面就能使用 border-1样式了，在要画线的元素内添加class类 border-1
** Hello.vue HTML部分： **

其实可以把 border-1px($color)的样式写在 .border-1类里，不过会使得代码重复，也不利于维护，所以分离出可复用的 border-1px($color)

参考文档：

预处器的对比——Sass、LESS和Stylus
stylus中文版参考文档之综述
移动web开发之像素和DPR