通常情况下,CSS 与 HTML5 响应式图片

  
通常情况下,CSS 与 HTML5 响应式图片
  通常情况下,CSS 与 HTML5 响应式图片
  随着Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高,「2」之前错误的接受了整数数值,16 开始支持dppx 单位,但是 Apple 的eoconnor提出的方案是这样的:。
  随着Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高。如何让图片在放大了两倍的Retina屏幕显示依然清晰,曾经一度困扰着网页开发者,好在CSS3 与 HTML5 已经着力在改变这种现状。那么到底什么是响应式图片呢?
  响应式图片是指:用户代理根据输出设备的分辨率不同加载不同类型的图片,不会造成带宽的浪费。同时,在改变输出设备类型或分辨率时,能及时加载对应类型的图片。
  对于很多 IOS 开发者来说可能已经不太陌生了,为了适配 Retina屏幕,传统的 CSS3 实现方式是通过加载一张宽高分别放大两倍的图片,然后通过 Media Queries使背景图片尺寸减小一倍「background-size:50% 50%;」,例如:
  

.{    background-image:url;/* 普通屏幕 */}/*-------------Retina ------------- */@media only screen and , /* Opera */       only screen and , /* Firefox 16 之前 */       only screen and , /* Webkit */       only screen and , /* 标准 */       only screen and  /* 标准 */{.{    background-image:url;    background-size: 105px 155px;}}
  在制作@2x图片时需要注意一些问题:
  如果类似上图一样是纯文字内容的图片,不要直接从大图片缩放为小图片,这样文字效果会有些失真,这是 Photoshop 渲染的问题。应该调整字号,再重新排版。可以直接看看:一淘首页的效果。
  蓝框内是直接缩放图片大小的效果,红框内是把字号从32号改成16号的效果。
  CSS3 Media Queries中用来定义设备分辨率的是 「resolution」媒体特性,同时派生出两个媒体特性,分别是 「min-resolution」和「max-resolution」。该规范中规定:若查询Non-Square Pixels 。标准清晰度数码视频信号中的像素都不是正方形的。例如:NTSC制式的像素高度大于宽度,而PAL制式的像素宽度则大于高度。)设备,在「min-resolution」查询中指定的值必须与最稀疏尺寸进行比较,在「max-resolution」查询中必须与 最密集尺寸进行比较。对于「resolution」从不查询Non-Square Pixels设备。另外在 CSS image Level 3「image-resolution」属性中定义了一些单位,比如「dppx」,各浏览器支持情况如下:
  「1」Chrome 支持私有属性「-webkit-min-device-pixel-ratio」和「-webkit-max-device-pixel-ratio」。
  「2」之前错误的接受了整数数值,16 开始支持dppx 单位。
  「3」Change our implementation of the resolution media query to use CSS units。
  「4」David Barr 在 Webkit 实现了 CSS3「image-resolution」属性, 并且支持了dppx,dpi和dpcm单位,具体 Chrome 哪个版本开始支持可以自行测试,相信 Media Queries中很快也会支持了。
  「-o-min-device-pixel-ratio」的取值是分数比如「2 /3」,Demo,详见:OperaDev 的文章
  Firefox 16 之前版本是「min–moz-device-pixel-ratio」,min 后面有两个「-」。
  显而易见,通过Media Queries来实现「响应式图片」还是很麻烦,CSS 代码的可维护性不高,有一些 hack 的味道。我们更期望一种原生的语法来选择不同的图片,值得庆幸的是 CSS ImageLevel 4中就实现了这种原生语法的「image-set」。
  
<image-set> = image-set<image-set-decl> =  <resolution>
  
background-image:url;/* 普通屏幕 */background-image: -webkit-image-set 1x,    url 2x);/* Retina */
  这里的单位「x」等同于「dppx」,将来是否统一还有待进一步讨论。注意 Webkit 目前只实现了 url 形式的取值,color、*-gradient 等暂不支持,而且「x」取负值似乎也是合法的。
  以下是一些常见移动设备的「min-device-pixel-ratio」值:
  -webkit-min-device-pixel-ratio:
  -webkit-min-device-pixel-ratio:
  -webkit-min-device-pixel-ratio:
  -webkit-min-device-pixel-ratio:
  CSS「image-set」 解决了背景图片的响应式问题,但是 HTML中的 img 元素怎么办呢?正当我一筹莫展的时候,2011年11月@brucel提出了HTML5 的一个解决草案:
  
<picture alt=""><source src=="min-width:800px"><source src=="min-width:480px"><source src=><!-- 不支持的浏览器降级处理 --><img src==""></picture>
  于此同时,其他的一些想法如雨后春笋般涌现出来,于是W3C社区讨论组Responsive Imagemunity Group 应运而生。最新的规范在这里: 。截止本文发布时间,最近一次更新是2013年1月7日,规范示例:
  
<picture width="500" height="500"><source media="" srcset="large-, large-"><source media="" srcset="med-, med-"><source srcset="small-, small-"><img src="small-" alt=""><p>essible text</p></picture>
  可以看到这里的「srcset」属性类似「image-set」,通常情况下,「srcset」里面的资源是具有 fallback 特性的,也就是说第一个图片资源无法加载的时候可以跳过加载后面的备用资源。
  但是 Apple 的eoconnor提出的方案是这样的:
  
<img src="foo-"    srcset="foo-,     foo-"    alt="">
  诚然,任何一个新标准的提出,都会存在各种不同的声音,这是好事,作为网页的最终开发者其实并不太关心实现语法。有任何问题大家也可以直接到 HTML5 中文兴趣小组参与讨论。
  本来想把新年的第一篇文章写的欢乐一些,不过貌似没啥槽点。HTML5 响应式图片的草案还刚刚开始,但是前景还是很美好的。目前我们能做的就是在CSS 中使用「image-set」属性值,因为目前大部分Retina 屏幕的设备的浏览器都是基于 Webkit 内核的,如果有特殊的需求可以使用 Media Queries。
  非常感谢kenny 对本文排版细节提出的 14 条建议,本文排版遵循:
  使用繁体中文引号 「」代替简体中文「“”」引号;
  中英文混排时英文首尾各加一个空格。
  
,「2」之前错误的接受了整数数值,16 开始支持dppx 单位,最新的规范在这里:,可以看到这里的「srcset」属性类似「image-set」,通常情况下,「srcset」里面的资源是具有 fallback 特性的,也就是说第一个图片资源无法加载的时候可以跳过加载后面的备用资源。

发表评论

电子邮件地址不会被公开。 必填项已用*标注