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

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

}

或者：

方法一：使用 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 定义一个函数。

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

css:

.tab{

display: flex;

width: 100%;

height: 40px;

line-height: 40px;

@include border-1px(rgba(7,17,27,0.1));

img元素srcset属性浅析

img srcset 属性

img 元素的 srcset 属性用于浏览器根据宽、高和像素密度来加载相应的图片资源。

属性格式：图片地址宽度描述w 像素密度描述x，多个资源之间用逗号分隔。例如：

<img src="small.jpg " srcset="big.jpg 1440w, middle.jpg 800w, small.jpg 1x" />

上面的例子表示浏览器宽度达到 800px 则加载 middle.jpg ，达到 1400px 则加载 big.jpg。注意：像素密度描述只对固定宽度图片有效。

img 元素的 size 属性给浏览器提供一个预估的图片显示宽度。

属性格式：媒体查询宽度描述（支持px），多条规则用逗号分隔。

<img src="images/gun.png"
         srcset="images/bg_star.jpg 1200w, images/share.jpg 800w, images/gun.png 320w"
         sizes="(max-width: 320px) 300w, 1200w"/>

上面的例子表示浏览器视口为 320px 时图片宽度为 300px，其他情况为 1200px。

css image-set()

css属性image-set()支持根据用户分辨率适配图像。

body {
    background-image: -webkit-image-set( url(../images/pic-1.jpg) 1x, url(../images/pic-2.jpg) 2x, url(../images/pic-3.jpg) 600dpi);
    background-image:         image-set( url(../images/pic-1.jpg) 1x, url(../images/pic-2.jpg) 2x, url(../images/pic-3.jpg) 600dpi);
}

上述代码将会为普通屏幕使用 pic-1.jpg，为高分屏使用 pic-2.jpg，如果更高的分辨率则使用 pic-3.jpg，比如印刷。