三在不同的设备上实现1像素边框

在不同的设备上实现1像素边框，这是因为不同的设备的设备像素比不同，通常有1，1.5，2等，因此利用媒体查询和元素的伪类去实现在不同的设备像素比上实现1px的边框

1、首先，在stylus文件夹下新建一个文件mixin.styl，内容如下

border-1px($color)
  position:relative  //让伪类相对于他定位，所以设置display:relative
  &:after  //设置伪类,实现边框
    display:block
    position: absolute
    left:0
    bottom:0
    border-top:1px solid $color
    content:' '
    width:100%

2、然后，在App.vue中引进mixin.styl文件，并且运用到.tab类中

<style lang="stylus">
  @import "./common/stylus/mixin.styl"  /*引进文件*/
  #app
    .tab
      display:flex
      width:100%
      height:40px
      line-height:40px
      border-1px(rgba(7,17,27,0.3))   /*运用该函数*/
      .tab-item
        flex:1
        text-align:center
        & > a             //router-link会被渲染成<a>标签
          display :block  //使子元素充满整个父元素
          font-size:14px
          color:rgb(77,85,93)
          &.active        //当某条路由被选中的时候，给其linkActiveClass设置的值active样式
            color:rgb(240,20,20)
</style>

这样就能在页面中显示边框了，但是还没有实现在不同设备上的缩放

3、接着，在stylue文件夹下，定义一个文件base.styl，里面的内容如下 

@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)

利用@media以及transform属性实现在不同设备上的1px边框

4、在styleus文件夹下新建一个文件index.styl，将上面两个文件引进来

@import "./mixin"
@import "./base"

5、在main.js中将index.styl文件引进来

import './common/stylus/index.styl'

6、在App.vue文件中，要实现1px边框的元素引用该类

经过上述的操作就可以实现1px的边框了

注意：这里的css书写采用styleus的语法书写，因此首先需要在项目中安装插件stylus和stylus.loader

npm install stylus --save
npm install stylus.loader --save

然后，在.vue文件中的<style>标签中声明属性lang的值为stylus

<!--这里css的书写采用styleus，所以要在<style>标签中注明属性lang为stylus-->
<style lang="stylus">
  .header
    color:white
    background:black
</style>

如果不声明属性lang的话，浏览器会报css语法错误：

Module build failed: CssSyntaxError: E:\vue-exercise\sell\src\components\header\src\components\header\header.vue:43:0: Missed semicolon