随着 Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高。如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变这种现状。那么到底什么是响应式图片呢?
什么是响应式图片?
响应式图片是指:用户代理根据输出设备的分辨率不同加载不同类型的图片,不会造成带宽的浪费。同时,在改变输出设备类型或分辨率时,能及时加载对应类型的图片。
CSS3 响应式图片
对于很多 IOS 开发者来说可能已经不太陌生了,为了适配 Retina 屏幕,传统的 CSS3 实现方式是通过加载一张宽高分别放大两倍的图片,然后通过 Media Queries 使背景图片尺寸减小一倍「background-size:50% 50%;」,例如:
.mod .hd h3 {
background-p_w_picpath:url(http://img02.taobaocdn.com/tps/i2/T10s3JXn4XXXXnbIAn-105-160.png);/* 普通屏幕 */
}
/* ------------- Retina ------------- */
@media only screen and (-o-min-device-pixel-ratio: 2/1), /* Opera */
only screen and (min--moz-device-pixel-ratio: 2), /* Firefox 16 之前 */
only screen and (-webkit-min-device-pixel-ratio: 2), /* Webkit */
only screen and (min-resolution: 240dpi), /* 标准 */
only screen and (min-resolution: 2dppx) /* 标准 */
{
.mod .hd h3{
background-p_w_picpath:url(http://img04.taobaocdn.com/tps/i4/T1947tXmJhXXcCfooh-210-320.png);
background-size: 105px 155px;
}
}
CSS3 Media Queries 中用来定义设备分辨率的是 「resolution」 媒体特性,同时派生出两个媒体特性,分别是 「min-resolution」和 「max-resolution」。该规范中规定:若查询 Non-Square Pixels (专业术语,指高度与宽度不等的像素,可以理解为「非正方形像素」。计算机屏幕上及高清晰度视频信号中的像素是正方形的(像素宽高比为 1:1)。标准清晰度数码视频信号中的像素都不是正方形的。例如:NTSC制式的像素高度大于宽度,而PAL制式的像素宽度则大于高度。)设备,在「min-resolution」查询中指定的值必须与最稀疏尺寸进行比较,在「max-resolution」查询中必须与最密集尺寸进行比较。对于「resolution」(没有「min-」或「max-」前缀)从不查询 Non-Square Pixels 设备。另外在 CSS p_w_picpath Level 3「p_w_picpath-resolution」属性中定义了一些单位,比如「dppx」。
Chrome 支持私有属性「-webkit-min-device-pixel-ratio」和「-webkit-max-device-pixel-ratio」。
Firefox 8.0 之前错误的接受了整数数值(不带单位),16 开始支持 dppx 单位。
Change our implementation of the resolution media query to use CSS units。
David Barr 在 Webkit 实现了 CSS3「p_w_picpath-resolution」属性, 并且支持了 dppx,dpi 和 dpcm 单位,具体 Chrome 哪个版本开始支持可以自行测试,相信 Media Queries 中很快也会支持了。
需要注意几点:
「-o-min-device-pixel-ratio」的取值是分数比如「2 /3」,Demo,详见:Opera Dev 的文章
Firefox 16 之前版本是「min–moz-device-pixel-ratio」,min 后面有两个「-」。
1dppx 相当于 96dpi。
显而易见,通过 Media Queries 来实现「响应式图片」还是很麻烦,CSS 代码的可维护性不高,有一些 hack 的味道。我们更期望一种原生的语法来选择不同的图片,值得庆幸的是 CSS Image Level 4 中就实现了这种原生语法的「p_w_picpath-set」。
「p_w_picpath-set」语法:
<p_w_picpath-set> = p_w_picpath-set( [ <p_w_picpath-set-decl>,]* [ <p_w_picpath-set-decl> | <color>] )
<p_w_picpath-set-decl> = [ <p_w_picpath> | <string> ] <resolution>
那么上面的例子我们可以改为:
background-p_w_picpath:url(http://img02.taobaocdn.com/tps/i2/T10s3JXn4XXXXnbIAn-105-160.png);/* 普通屏幕 */
background-p_w_picpath: -webkit-p_w_picpath-set(
url(http://img02.taobaocdn.com/tps/i2/T10s3JXn4XXXXnbIAn-105-160.png) 1x,
url(http://img04.taobaocdn.com/tps/i4/T1947tXmJhXXcCfooh-210-320.png) 2x);/* Retina */
-webkit-min-device-pixel-ratio: 1.0
所有非 Retina 的 Mac
所有非 Retina 的 iOS 设备
Acer Iconia A500
Samsung Galaxy Tab 10.1
Samsung Galaxy S
其他设备
-webkit-min-device-pixel-ratio: 1.3
Google Nexus 7
-webkit-min-device-pixel-ratio: 1.5
Google Nexus S
Samsung Galaxy S II
HTC Desire
HTC Incredible S
HTC Velocity
HTC Sensation
-webkit-min-device-pixel-ratio: 2.0
iPhone 4
iPhone 4S
iPhone 5
iPad (3rd generation)
iPad 4
所有 Retina displays 的 Mac
Google Galaxy Nexus
Google Nexus 4
Google Nexus 10
Samsung Galaxy S III
Samsung Galaxy Note II
Sony Xperia S
HTC One X
-webkit-min-device-pixel-ratio: 3.0
HTC Butterfly
Sony Xperia S