| 文章简介：html5与css响应式图片。 |
随着 Retina 屏幕的逐渐普及，网页中对图片的适配要求也越来越高。如何让图片在放大了两倍的 Retina 屏幕显示依然清晰，曾经一度困扰着网页开发者，好在 CSS3 与 HTML5 已经着力在改变这种现状。那么到底什么是响应式图片呢？
什么是响应式图片？
响应式图片是指：用户代理根据输出设备的分辨率不同加载不同类型的图片，不会造成带宽的浪费。同时，在改变输出设备类型或分辨率时，能及时加载对应类型的图片。
CSS 响应式图片
对于很多 IOS 开发者来说可能已经不太陌生了，为了适配Retina 屏幕，传统的 CSS3 实现方式是通过加载一张宽高分别放大两倍的图片，然后通过 Media Queries 使背景图片尺寸减小一倍「background-size:50% 50%;」，例如：
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | .mod .hd h3 { background-image:url(http://www.csswang.com/wp-content/uploads/2013/01/030234veU.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-image:url(http://img02.taobaocdn.com/tps/i2/T1t9wzXlxXXXczY8cm-212-310.png); background-size: 106px 155px; } } |
两张图片的对比效果：
在制作@2x图片时需要注意一些问题：
如果类似上图一样是纯文字内容的图片，不要直接从大图片缩放为小图片，这样文字效果会有些失真，这是 Photoshop 渲染的问题。应该调整字号，再重新排版。可以直接看看一淘首页的效果
蓝框内是直接缩放图片大小的效果，红框内是把字号从32号改成16号的效果。
Demo详见：http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
HTML5 响应式图片
CSS image-set 解决了背景图片的响应式问题，但是 HTML中的 img 元素怎么办呢？正当我一筹莫展的时候，2011年11月 @brucel 提出了HTML5 的一个草案：
?
| 1 2 3 4 5 6 7 | <picture alt=”"> <source src=hires.png media=”min-width:800px”> <source src=midres.png media=”min-width:480px”> <source src=lores.png> <!– 不支持的浏览器降级处理 –> <img src=midres.png alt=”"> </picture> |
于此同时，其他的一些想法如雨后春笋般涌现出来，于是 W3C 社区讨论组 Responsive Images Community Group 应运而生。最新的规范在这里：http://picture.responsiveimages.org/ 。截止本文发布时间，最近一次更新是 2013年1月7日，规范示例：
?
| 1 2 3 4 5 6 7 | <picture width=”500″ height=”500″> <source media=”(min-width: 45em)” srcset=”large-1.jpg 1x, large-2.jpg 2x”> <source media=”(min-width: 18em)” srcset=”med-1.jpg 1x, med-2.jpg 2x”> <source srcset=http://www.webjx.com/css/”small-1.jpg 1x, small-2.jpg 2x”> <img src=http://www.webjx.com/css/”small-1.jpg” alt=”"> <p>Accessible text</p> </picture> |
可以看到这里的「srcset」属性类似 image-set，通常情况下，srcset 里面的资源是具有 fallback 特性的，也就是说第一个图片资源无法加载的时候可以跳过加载后面的备用资源。 但是 Apple 的 eoconnor 提出的方案是这样的：
?
| 1 2 3 | <img src=http://www.webjx.com/css/”foo-lores.jpg” srcset=”foo-hires.jpg 2x, foo-superduperhires.jpg 6.5x” alt=”decent alt text for foo.”> |
诚然，任何一个新标准的提出，都会存在各种不同的声音，这是好事，作为网页的最终开发者其实并不太关心实现语法。有任何问题大家也可以直接到 HTML5 中文兴趣小组参与讨论。
小结
本来想把新年的第一篇文章写的欢乐一些，不过貌似没啥槽点。HTML5 响应式图片的草案还刚刚开始，不过前景还是很美好的。目前我们能做的就是在CSS 中使用 image-set 属性值，因为目前大部分 Retina 屏幕的设备的浏览器都是基于 Webkit 内核的，如果有特殊的需求可以使用 Media Queries。
欢迎大家阅读《CSS3和HTML5网页设计:响应式网页图片设…_css》,跪求各位点评,若觉得好的话请收藏本文，by 搞代码
转载请注明原文链接：CSS3和HTML5网页设计:响应式网页图片设_css
