HTML5图像适配介绍

现在移动互联网日新月异，各种移动设备层出不穷，在iPhone 4上最先出现视网膜屏幕后，这种技术快速的被大多数智能移动设备所采用，可以遇见将会快速的普及开来。

        但是这也对我们的Web提出了更高的要求，因为我们需要适配更为复杂的UI方案。

        适配图像将会是响应式网络设计下一个需要解决的问题，因为我们针对不同分辨率的屏幕，例如iPhone 4s和iMac，最佳的方案是分别提供不同的图像。因为为低分辨率的屏幕提供高分辨率图像浪费带宽并影响下载速度，而为高分辨率的屏幕提供低分辨率图像又非常影响体验。

        HTML5规范正在讨论分辨率图像的原生适配支持，其中一种比较可靠的方案如下：

[htML] 
img src="foo-lores.jpg" 
     srcset="foo-hires.jpg 2x, foo-suPErduperhires.jpg 6.5x" 
     alt="decent alt text for foo.">  
        这种方式为img标签引入了一个新的srcset属性，通过2x和6.5x这种形式来告诉浏览器屏幕相对分辨率所采用的适配图像。请注意我们并没有使用媒介查询Media Query。

        另外与此类似的image set方案（作为CSS4的一部分）已经被添加到webkit里，示例如下：

[html] 
selector {  
    background: image-set(url(foo-lowres.png) 1x, 
        url(foo-highres.png) 2x) center;  
}  
        srcset方案目前还在讨论和完善中，但是可以预见，我们将会有一个可靠的技术方案和标准。

     作者：hfahe

现在移动互联网日新月异，各种移动设备层出不穷，在iPhone 4上最先出现视网膜屏幕后，这种技术快速的被大多数智能移动设备所采用，可以遇见将会快速的普及开来。

        但是这也对我们的Web提出了更高的要求，因为我们需要适配更为复杂的UI方案。

        适配图像将会是响应式网络设计下一个需要解决的问题，因为我们针对不同分辨率的屏幕，例如iPhone 4s和iMac，最佳的方案是分别提供不同的图像。因为为低分辨率的屏幕提供高分辨率图像浪费带宽并影响下载速度，而为高分辨率的屏幕提供低分辨率图像又非常影响体验。

        HTML5规范正在讨论分辨率图像的原生适配支持，其中一种比较可靠的方案如下：

[html] 
img src="foo-lores.jpg" 
     srcset="foo-hires.jpg 2x, foo-superduperhires.jpg 6.5x" 
     alt="decent alt text for foo.">  
        这种方式为img标签引入了一个新的srcset属性，通过2x和6.5x这种形式来告诉浏览器屏幕相对分辨率所采用的适配图像。请注意我们并没有使用媒介查询Media Query。

        另外与此类似的image set方案（作为CSS4的一部分）已经被添加到WebKIT里，示例如下：

[html] 
selector {  
    background: image-set(url(foo-lowres.png) 1x, 
        url(foo-highres.png) 2x) center;  
}  
        srcset方案目前还在讨论和完善中，但是可以预见，我们将会有一个可靠的技术方案和标准。

     作者：hfahe

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！