一、什么是响应式图片?
根据不同的屏幕分辨率,和设备像素比来尽可能选择高分辨率的图片。
或者换个角度来说,当在小屏幕上不需要高清图或大图,这样我们用小图代替,就可以减少网络带宽啦。
1
2
1、同样是普通屏幕(相对与retain等高清屏幕而言)上,在手机屏幕上显示小图片,在电脑浏览器上显示大图片。
2、同样大小的屏幕上,普通设备上显示普清图片,高清屏幕(如 retain屏幕)的设备上显示高清图片。
二、如何实现响应式图片?
1、使用一张图片+css样式
<div style="text-align: center" style="width: 100%">
<img src="css/a.png" style="width: 80%">
</div>
这样图片始终保持在频幕居中位置,且长度为外层div的80%宽
2、多张图片
上面那种方式,如果图片被拉伸过大会导致图片不清楚,影响用户体验。所以我们可以提供多张图片让浏览器选择最合适的。
2.1 采用媒体查询的方式
@media only screen and (max-width : 512px) {
.img { background-image: url(sunset-small.jpg); }
}
@media only screen and (max-width : 1024px) {
.img { background-image: url(sunset-large.jpg); }
}
only :只针对,同类的有all media(所有设备)
screen:适应计算机彩色屏幕,同类的还有print(适应打印预览模式下查看的内容或者打印机打印的内容)
and:与条件 同类有or
max-width :1024px 适应浏览器的最小宽度为 1024 像素,同类还有(指定min-width,width)
符合以上条件,则使用大括号里的样式
2.2 html 的
srcset和sizes是HTML5新支持的属性,浏览器支持情况如下:
http://caniuse.mojijs.com/Home/Html/item/key/srcset/index.html
<img class="image" src="mm-width-128px.jpg"
srcset="mm-width-128px.jpg 128w, mm-width-256px.jpg 256w, mm-width-512px.jpg 512w"
sizes="(max-width: 360px) 340px, 128px">
src:当设备不支持srcset,sizes属性时,使用这个图片
srcset: 列出图片资源
例如mm-width-128px.jpg 128w 代表图片是mm-width-128px.jpg 128px宽的图片,规格是128w。
128w的单位w是文件尺寸单位,一般128px宽度就写128w,如果是128px宽度的图片是png24无损图片,或100%质量JPG图片,则规格定为256w(即128*2)
sizes:用来表示尺寸临界点。
语法如下:
sizes=”[media query] [length], [media query] [length] … etc”
例如
size = “(max-width: 360px) 340px”
Eg (max-width: 360px)是媒体查询,表示当视图宽度不大于360px时,图片的宽度限制为340像素(这个宽度指的是css指定的图片大小,也称为渲染尺寸),当设备像素比是1的时候,应该使用大于等于340w规格的图片,所以浏览器会选择mm-width-512px.jpg
当设备像素比是2的时候,应该使用大于等于3402=680w规格的图片
为什么呢?因为设备像素比是2,代表设备放2个像素点,但实际我们看到的宽度只有一个像素,也就是设备上正常显示1个像素大小需要2个像素点,这就是高清的由来,相当于图片压缩了。可是srcset里没有大于等于680w的图片,浏览器只有尽量选择高清的图,即mm-width-512px.jpg。
Eg 当视觉宽度为400px(>360px),图片的宽度限制为128像素
设备像素比为1时,选择>=128w规格的图(即mm-width-128px.jpg)
设备像素比为2时,选择>=1282w(图片限制的宽度*设备像素比),规格的图片即mm-width-256px.jpg ,设备像素比为3时,选择512w规格的图,设备像素比为4时,选择640w规格的图(可以没有提供,于是选择了512w的图)
sizes=”(max-width: 360px) calc(100vw - 20px) “
代表:当视图宽度不大于360px时,应该使用大于100%视觉宽度-20px的规格的图片
(注:vw代表视觉宽度的百分比)
Eg 当视觉宽度为250px,设备像素比为1时,,图片的宽度限制为(250px-20px)=230px,
设备像素比为1,选择规格230w以上的图片,所以应该选mm-width-256px.jpg这张图来显示
设备像素比为2,选择230*2w以上的图片,所以选择mm-width-512px.jpg这张图来显示