HardBirch

HTML5图像适配介绍

时间:12-07-02 栏目:HTML5移动开发 作者:张飞不张,文采横飞 评论:2 点击: 2,079 次

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

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

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

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

<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里,示例如下:

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

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

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

        转载请注明:来自蒋宇捷的博客

声明: 本文由( 张飞不张,文采横飞 )原创编译,转载请保留链接: HTML5图像适配介绍

HTML5图像适配介绍:目前有2 条留言

  1. 板凳
    spring21st:

    hi,宇捷
    我测试了下srcset 和 image-set 都没有生效呀,是不是现在ios safari还不支持这个标准?

    2012-08-01 17:18 [回复]
  2. 沙发
    hfahe:

    是的,目前只是讨论中,尚未实现。
    [reply]spring21st[/reply]

    2012-08-17 12:42 [回复]

发表评论


QQ群互动

Linux系统与内核学习群:194051772

WP建站技术学习交流群:194062106

魔豆之路QR

魔豆的Linux内核之路

魔豆的Linux内核之路

优秀工程师当看优秀书籍

优秀程序员,要看优秀书!

赞助商广告

友荐云推荐