移动端项目中 @2x 图 和 @3x 图 的使用（需要支持css3）

移动端开发过程中，因为手机的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');      }

或者：

方法一：使用 CSS 的 DevicePixelRatio 媒查询属性

CSS 样式代码

/*默认大小*/
.photo {background-image: url(image100.png);}
/* 如果设备像素大于等于2，则用2倍图 */
@media screen and (-webkit-min-device-pixel-ratio: 2),
screen and (min--moz-device-pixel-ratio: 2) {
  .photo {
    background-image: url(image200.png);
    background-size: 100px 100px;
  }
}
/* 如果设备像素大于等于3，则用3倍图 */
@media screen and (-webkit-min-device-pixel-ratio: 3),
screen and (min--moz-device-pixel-ratio: 3) {
  .photo {
    background-image: url(image300.png);
    background-size: 100px 100px;
  }
}
.photo {width:100px;height:100px;}

方法二:直接使用 IMG 的 SRCSET 属性

<img width="100" height="100" src="image100.png" srcset="image200.png 2x,image300.png 3x"/>

上面代码中，浏览器会通过 srcset 属性来自动选择2X,3X图，比如用 iPhone 6s Plus，就会自动选择3x 的图像。

移动端 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)); }