移动端项目中 @2x 图 和 @3x 图 的使用

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

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

1 2 3 4 5 6

@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 方法

1 2 3 4 5 6 7

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

移动端 border 的 1px 问题：

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

1 2 3 4 5 6 7 8 9 10 11 12

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

// 判断在不同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:

1 2 3 4 5 6 7 8 9 10 11

<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:

1 2 3 4 5 6 7

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