移动端项目中 @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{
  width: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;
        width: 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;
    width: 100%;
    height: 40px;
    line-height: 40px;
    @include border-1px(rgba(7,17,27,0.1));
}

.