zoukankan      html  css  js  c++  java
  • 移动端项目中 @2x 图 和 @3x 图 的使用

    移动端开发过程中,因为手机的dpr(设备像素比不同),我们需要根据dpr来修改图标的大小:

    1.通过mixin,动态修改图标的背景图片。通过@media (媒体查询),判断设备的dpr。

    @mixin bg-image($url) {
        background-image: url($url + "@2x.png");
        @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {
            background-image: url($url + "@3x.png");
        }
    }

    2.css样式中调用 bg-image 方法

    div{
      30px;
      height:20px;
      background-size:30px  20px;
      background-repeat:no-repeat;
      @include bg-image('special_1');      
    }

    移动端 border 的 1px 问题:

    1.为了方便通用,使用 mixin 定义一个函数。

    @mixin border-1px($color) {
        position: relative;
        &:after{
            display: block;
            position: absolute;
            left: 0;
            bottom: 0;
             100%;
            border-top: 1px solid $color;
            content: ' ';
        }
    }

    2.对 伪类 :after 进行缩放,以适应不同 dpr 的手机。通过 @media (媒体查询),来确定 设备的 dpr。 为了方便调用,定义一个全局的 class (此处为 border-1px)

    // 判断在不同dpr下的显示情况
    @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);
            }
        }
    }

    3.html/css样式调用.

    html:

    <div class="tab border-1px">
      <div class="tab-item">
        <a v-link="{path:'/goods'}">商品</a>
      </div>
      <div class="tab-item">
        <a v-link="{path:'/ratings'}">评价</a>
      </div>
      <div class="tab-item">
        <a v-link="{path:'/seller'}">商家</a>
      </div>
    </div>

    css:

    .tab{
        display: flex;
         100%;
        height: 40px;
        line-height: 40px;
        @include border-1px(rgba(7,17,27,0.1));
    }

    .

  • 相关阅读:
    转】用Mahout构建职位推荐引擎
    转】Mahout构建图书推荐系统
    android_重写button样式
    【超有用】图解--怎样使用本地的dtd文件映射
    Android开发之按键、触摸屏和手势输入专业压力測试方法
    怎样让你的安卓手机瞬间变Firefox os 畅玩firefox os 应用
    poj1804(归并排序求逆序数)
    Difference between datacontract and messagecontract in wcf
    UVA 1434
    程序猿生存定律--成长路上常见的坑(2)
  • 原文地址:https://www.cnblogs.com/crazycode2/p/6557520.html
Copyright © 2011-2022 走看看