新浪微博 登陆  注册   设为首页 加入收藏

学PHP >> HTML5教程 >> CSS 与 HTML5 响应式图片

CSS 与 HTML5 响应式图片

查看次数10525 发表时间2013-01-23 14:30:31

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

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



什么是响应式图片?


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



CSS3 响应式图片


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


.mod .hd h3 {
    background-image:url(http://alibuybuy-img11.stor.sinaapp.com/2013/01/ac30_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-image:url(http://alibuybuy-img11.stor.sinaapp.com/2013/01/a8e5_T1947tXmJhXXcCfooh-210-320.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」,各浏览器支持情况如下:

 

特性ChromeFirefox (Gecko)IEOperaSafari (WebKit)
基本特性不支持「1」「4」3.5 (1.9.1) 「2」99.5不支持 「1」「4」
dppx「4」16.0未知12.10「3」「4」

 


需要注意几点:

  1. 「-o-min-device-pixel-ratio」的取值是分数比如「2 /3」,Demo,详见:Opera Dev 的文章
  2. Firefox 16 之前版本是「min–moz-device-pixel-ratio」,min 后面有两个「-」。
  3. 1dppx 相当于 96dpi。


显而易见,通过 Media Queries 来实现「响应式图片」还是很麻烦,CSS 代码的可维护性不高,有一些 hack 的味道。我们更期望一种原生的语法来选择不同的图片,值得庆幸的是 CSS Image Level 4 中就实现了这种原生语法的「image-set」。


「image-set」语法:


 = image-set( [ , ]* [  | ] )
 = [  |  ] 


那么上面的例子我们可以改为:

background-image:url(http://alibuybuy-img11.stor.sinaapp.com/2013/01/ac30_T10s3JXn4XXXXnbIAn-105-160.png);/* 普通屏幕 */
background-image: -webkit-image-set(
    url(http://alibuybuy-img11.stor.sinaapp.com/2013/01/ac30_T10s3JXn4XXXXnbIAn-105-160.png) 1x,
    url(http://alibuybuy-img11.stor.sinaapp.com/2013/01/a8e5_T1947tXmJhXXcCfooh-210-320.png) 2x);/* Retina */


这里的单位「x」等同于「dppx」,将来是否统一还有待进一步讨论。注意 Webkit 目前只实现了 url() 形式的取值,color、*-gradient() 等暂不支持,而且「x」取负值似乎也是合法的。


以下是一些常见移动设备的「min-device-pixel-ratio」值:


-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



(转发请注明转自:学PHP)    


  相关推荐




  发表评论
昵称:
(不超过20个字符或10个汉字)
内容: