HTML5资讯

当前位置: HTML5技术网 > HTML5资讯 > HTML5图像适配介绍

HTML5图像适配介绍

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

 

  

 

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

 

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

 

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

  1. <img src="foo-lores.jpg"  
  2.      srcset="foo-hires.jpg 2x, foo-superduperhires.jpg 6.5x"  
  3.      alt="decent alt text for foo.">

      这种方式为img标签引入了一个新的srcset属性,通过2x和6.5x这种形式来告诉浏览器屏幕相对分辨率所采用的适配图像。请注意我们并没有使用媒介查询Media Query。

 

  另外与此类似的 image set 方案(作为CSS4的一部分)已经被添加到WebKit里,示例如下:

  1. selector {  
  2.     background: image-set(url(foo-lowres.png) 1x,  
  3.         url(foo-highres.png) 2x) center;  
  4. }  

    srcset方案目前还在讨论和完善中,但是可以预见,我们将会有一个可靠的技术方案和标准。

 

  最后不要忘了,针对响应式图像,我们还有SVG这个强大而美妙的方案(详见《了解  SVG  》)。

       本文来自:蒋宇捷的博客

【编辑推荐】

  1. 移动开发跨平台之争:HTML5只是看上去很美?

  2. Facebook放弃HTML5转战原生应用的4个原因

  3. 外敌重重/自绊自脚?HTML5普及的血泪史

【HTML5图像适配介绍】相关文章

1. HTML5图像适配介绍

2. 7款炫酷实用 jQuery/HTML5图片应用

3. Sencha发布移动 HTML5图表库

4. Chart.js:开源的HTML5图表库

5. 使用HTML5做个画图板的方法介绍

6. Flickr 介绍基于HTML5技术的新版 Uploadr 网页界面

7. HTML5 web开发框架 tiggr 介绍

8. 常见HTML5视频播放器介绍

9. Adobe Dreamweaver CS5中文版下载及安装介绍

10. WebApp UI框架App.js的入门介绍和使用手册

本文来源:https://www.51html5.com/a2865.html

点击展开全部

﹝HTML5图像适配介绍﹞相关内容

「HTML5图像适配介绍」相关专题

其它栏目

也许您还喜欢