zoukankan      html  css  js  c++  java
  • 在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      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>
  • 相关阅读:
    剑指 Offer——13. 调整数组顺序使奇数位于偶数前面
    剑指 Offer——3. 从尾到头打印链表
    剑指 Offer——2. 替换空格
    剑指 Offer——1. 二维数组中的查找
    LeetCode 905. Sort Array By Parity 按奇偶校验排列数组
    LeetCode 448. Find All Numbers Disappeared in an Array找到所有数组中消失的元素
    SSH 代码笔记
    anaconda3安装caffe
    opencv多版本安装
    人脸文章与数据库
  • 原文地址:https://www.cnblogs.com/songdongdong/p/7560926.html
Copyright © 2011-2022 走看看