CSS 与 HTML5 响应式图片

随着Retina 屏幕的逐渐普及，网页中对图片的适配要求也越来越高。如何让图片在放大了两倍的Retina屏幕显示依然清晰，曾经一度困扰着网页开发者，好在CSS3 与 HTML5 已经着力在改变这种现状。那么到底什么是响应式图片呢？

什么是响应式图片？

响应式图片是指：用户代理根据输出设备的分辨率不同加载不同类型的图片，不会造成带宽的浪费。同时，在改变输出设备类型或分辨率时，能及时加载对应类型的图片。

CSS3 响应式图片

对于很多 IOS 开发者来说可能已经不太陌生了，为了适配 Retina屏幕，传统的 CSS3 实现方式是通过加载一张宽高分别放大两倍的图片，然后通过Media Queries使背景图片尺寸减小一倍「background-size:50% 50%;」，例如：

.mod .hd h3 {
    background-image:url(/uploads/allimg/c140128/13Z91441140-LV0.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(/uploads/allimg/c140128/13Z914411950-Q491.png);
    background-size: 105px 155px;
}
}

两张图片的对比效果：

在制作@2x图片时需要注意一些问题：

如果类似上图一样是纯文字内容的图片，不要直接从大图片缩放为小图片，这样文字效果会有些失真，这是 Photoshop 渲染的问题。应该调整字号，再重新排版。可以直接看看：一淘首页的效果。

蓝框内是直接缩放图片大小的效果，红框内是把字号从32号改成16号的效果。

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 image Level 3「image-resolution」属性中定义了一些单位，比如「dppx」，各浏览器支持情况如下：