在vue项目中使用stylus来实现移动端的1px

1.目录结构（vue项目，但是并不局限于vue）

2.首先定义一个mixin.styl文件

 1 border-1px($color)
 2   position: relative
 3   &:after
 4     display: blcok
 5     position: absolute
 6     left: 0
 7     bottom: 0
 8     width: 100%
 9     border-top: 1px solid $color
10     content: ' '

3.再定义一个统一处理dpr的stylus文件，base.styl

 1 //这里我们使用@media媒介查询来来对不同的dpr进行缩放
 2 //刚才我们在app.vue里面的一个元素上添加了一个border-1px的类名，下面我们就通过这个类名选中该元素，然后对他的伪元素进行缩放，然后这样就实现了真正意义上的1px
 3 
 4 @media(-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5)
 5   .border-1px
 6     &::after
 7       -webkit-transform: scaley(0.7)
 8       transform: scaley(0.7)
 9 
10 @media(-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2)
11   .border-1px
12     &::after
13       -webkit-transform: scaley(0.5)
14       transform: scaley(0.5)

4.在定义一个index.styl文件统一管理我们的公共stylus文件

1 @import "./mixin"
2 @import "./base"

5.在全局中引入index.styl（这里我们使用vue的项目来举例，那就在main.js中引入）

//这里可以使用项目路径，如果嫌麻烦，可以去webpack进行路径的配置
import './common/stylus/index.styl'

6.在我们需要的使用的地方使用

//这里假设我们在app.vue中使用
<template>
  <div id="index">
    <v-header></v-header>
//还要在dom元素上加上我们处理dpr缩放的处理，也就是对伪类的缩放，怎么缩放呢，我们再给该元素加上border-1px这个特殊的类名，注意这里的border-1px和下面的border-1px不是一回事，下面的那个border-1px是一个stylus的方法，加上这个类名后接下来怎么处理呢，请看上base.styl的解释
    <div class="tab border-1px">
      <div class="tab-item">
        <router-link :to="{path:'/test1'}">测试1</router-link>
      </div>
      <div class="tab-item">
        <router-link :to="{path:'/test2'}">测试2</router-link>
      </div>
      <div class="tab-item">
        <router-link :to="{path:'/test3'}">测试3</router-link>
      </div>
    </div>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import header from './components/header/header'
export default {
  name: 'app',
  data () {
    return {}
  },
  components: {
    'v-header': header
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
// 引入我们写好的mixin.styl文件
  @import './common/stylus/mixin.styl'
  .tab
    display: flex;
    wdith:100%;
    height:40px;
    line-height:40px;
// 使用ximin.styl文件中定义好的border-1px并传入参数（你可以理解他为一个处理函数但是和函数的使用方式确不同，他会将这个方法中定义的属性扩展到我们使用的元素上；这里其实我们并没有实现1px的边框，因为还没有对伪类进行缩放，所以请看dom元素上的解释）
    border-1px(rgba(7, 17, 27, 0.1))
    .tab-item
      flex:1;
      text-align:center;
      & > a
        display:block;
        font-size:14px;
        color:rgb(77, 85, 93)
        &.active
          color:rgb(240, 20, 20)

</style>

在vue项目中使用stylus来实现移动端的1px

推荐阅读