移动端项目中 @2x 图和 @3x 图的使用（需要支持css3）1.通过mixin,动态修改图标的背景图片。通过@m

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

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

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

1234567	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 定义一个函数。

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

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

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

1234567	.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，比如印刷。