CSS 与 HTML5 响应式图片
什么是响应式图片?
响应式图片是指:用户代理根据输出设备的分辨率不同加载不同类型的图片,不会造成带宽的浪费。同时,在改变输出设备类型或分辨率时,能及时加载对应类型的图片。
CSS3 响应式图片
对于很多 IOS 开发者来说可能已经不太陌生了,为了适配 Retina 屏幕,传统的 CSS3 实现方式是通过加载一张宽高分别放大两倍的图片,然后通过 Media Queries 使背景图片尺寸减小一倍「background-size:50% 50%;」,例如:
.mod .hd h3 {
background-image:url(http://img02.taobaocdn.com/tps/i2/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://img04.taobaocdn.com/tps/i4/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」,各浏览器支持情况如下:
特性 | Chrome | Firefox (Gecko) | IE | Opera | Safari (WebKit) |
---|---|---|---|---|---|
基本特性 | 不支持「1」「4」 | 3.5 (1.9.1) 「2」 | 9 | 9.5 | 不支持 「1」「4」 |
dppx |
「4」 | 16.0 | 未知 | 12.10「3」 | 「4」 |
- 「1」Chrome 支持私有属性「-webkit-min-device-pixel-ratio」和「-webkit-max-device-pixel-ratio」。
- 「2」Firefox 8.0 之前错误的接受了整数数值(不带单位),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,详见:Opera Dev 的文章
- Firefox 16 之前版本是「min–moz-device-pixel-ratio」,min 后面有两个「-」。
- 1dppx 相当于 96dpi。
显而易见,通过 Media Queries 来实现「响应式图片」还是很麻烦,CSS 代码的可维护性不高,有一些 hack 的味道。我们更期望一种原生的语法来选择不同的图片,值得庆幸的是 CSS Image Level 4 中就实现了这种原生语法的「image-set」。
「image-set」语法:
<image-set> = image-set( [ <image-set-decl>, ]* [ <image-set-decl> | <color>] )
<image-set-decl> = [ <image> | <string> ] <resolution>
那么上面的例子我们可以改为:
background-image:url(http://img02.taobaocdn.com/tps/i2/T10s3JXn4XXXXnbIAn-105-160.png);/* 普通屏幕 */
background-image: -webkit-image-set(
url(http://img02.taobaocdn.com/tps/i2/T10s3JXn4XXXXnbIAn-105-160.png) 1x,
url(http://img04.taobaocdn.com/tps/i4/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
-webkit-min-device-pixel-ratio: 3.0
- HTC Butterfly
- Sony Xperia S
HTML5 响应式图片
CSS「image-set」 解决了背景图片的响应式问题,但是 HTML中的 img 元素怎么办呢?正当我一筹莫展的时候,2011年11月 @brucel 提出了HTML5 的一个解决草案:
<picture alt="">
<source src=hires.png media="min-width:800px">
<source src=midres.png media="min-width:480px">
<source src=lores.png>
<!-- 不支持的浏览器降级处理 -->
<img src=midres.png alt="">
</picture>
于此同时,其他的一些想法如雨后春笋般涌现出来,于是W3C 社区讨论组Responsive Images Community Group 应运而生。最新的规范在这里:http://picture.responsiveimages.org/(W3C http://www.w3.org/TR/html-picture-element/)。截止本文发布时间,最近一次更新是 2013年4月24日,规范示例:
<picture width="500" height="500">
<source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x">
<source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x">
<source srcset="small-1.jpg 1x, small-2.jpg 2x">
<img src="small-1.jpg" alt="">
<p>Accessible text</p>
</picture>
可以看到这里的「srcset」属性类似「image-set」,通常情况下,「srcset」里面的资源是具有 fallback 特性的,也就是说第一个图片资源无法加载的时候可以跳过加载后面的备用资源。
但是 Apple 的 eoconnor 提出的方案是这样的:
<img src="foo-lores.jpg"
srcset="foo-hires.jpg 2x,
foo-superduperhires.jpg 6.5x"
alt="decent alt text for foo.">
诚然,任何一个新标准的提出,都会存在各种不同的声音,这是好事,作为网页的最终开发者其实并不太关心实现语法。有任何问题大家也可以直接到 HTML5 中文兴趣小组参与讨论。
来源:http://ued.taobao.com/blog/2013/01/css-and-html5-adaptive-images/
CSS 与 HTML5 响应式图片的更多相关文章
- CSS与HTML5响应式图片
随着 Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高.如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变 ...
- 如何使用 HTML5 的picture元素处理响应式图片
来自: http://www.w3cplus.com/html5/quick-tip-how-to-use-html5-picture-for-responsive-images.html 图片在响应 ...
- web响应式图片设计实现
.header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { t ...
- bootstrap-内联表单 水平(横向)表单 响应式图片 辅助类 [转]
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 【读书笔记《Bootstrap 实战》】3.优化站点资源、完成响应式图片、让传送带支持手势
A.优化站点资源 速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap ...
- 继续送假期干货——响应式图片工具smartImg
中午看<众妙之门>看到一个响应式图片处理工具(点此查看)的介绍,然后就心血来潮想着不妨自己写一个基于JQ的吧,于是就又有了这么一个干货给大家. smartImg 的全部文件可以从我的Git ...
- 【Bootstrap】3.优化站点资源、完成响应式图片、让传送带支持手势
A.优化站点资源 速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap ...
- Html5响应式设计与实现广场
由于提出的想法响应式设计,越来越多的网站使用这样的思想.各类大型网站如雨后春笋般涌了出来.例如:小米商城.天猫等. 至于响应式设计的概念等大家能够去百度百度,我这里就不相信解说了.直接为大家带来源代码 ...
- bootstrap中如何让响应式图片(img-responsive)水平居中
我们在用bootstrap排版内容的时候,有的时候在内容中需要图片水平居中对齐. 一般情况下,我们的图片都使用了 .img-responsive 类来实现响应式图片.如果需要实现响应式图片水平居中,那 ...
随机推荐
- 说说数据库架构,ORM缓存和路由
为什么在ORM层做缓存,而不是DB层 ORM能有效地提高程序员的开发效率,程序员更喜欢操作对象而不是数据库,他们不关心也不想手写一堆SQL语句,毕竟一个公司里普通程序员要占多数,他们并不是非常熟悉数据 ...
- IOS 获取手机各种信息
/手机序列号 NSString* identifierNumber = [[UIDevice currentDevice] uniqueIdentifier]; NSLog(@&qu ...
- 第一次线上OJ水友赛
偶然的机会遇到了这个神奇的网站http://www.luogu.org/ 巧遇今天又有小比赛果断去试试,为我的蓝桥北京之旅练练手. 苦苦的在机房刷了一下午,大概做到了6点半. 最激动的是等成绩了, ...
- EC读书笔记系列之12:条款22、23、24
条款22 将成员变量声明为private 记住: ★切记将成员变量声明为private.这可赋予客户访问数据的一致性.可细微划分访问控制.允诺约束条件获得保证,并提供class作者以充分的实现弹性. ...
- shared_ptr智能指针源码剖析
(shared_ptr)的引用计数本身是安全且无锁的,但对象的读写则不是,因为 shared_ptr 有两个数据成员,读写操作不能原子化.根据文档 (http://www.boost.org/doc/ ...
- C++ 获取UUID
#include <string> #include <stdio.h> #if defined(WIN32)||defined(WINCE)||defined(WIN64) ...
- STL源码剖析 迭代器(iterator)概念与编程技法(三)
1 STL迭代器原理 1.1 迭代器(iterator)是一中检查容器内元素并遍历元素的数据类型,STL设计的精髓在于,把容器(Containers)和算法(Algorithms)分开,而迭代器(i ...
- flexbox弹性盒子模型
这几天在做移动端的web开发,遇到了一些问题,之前没有折腾过这方面的东西,这次好好吸收下 css3的flexbox--弹性盒子模型,这个盒模型决定了一个盒子在其他盒子中的分布方式及如何处理可用的空间. ...
- [LeetCode]题解(python):155-Min Stack
题目来源: https://leetcode.com/problems/min-stack/ 题意分析: 实现一个小的栈,包括初始化,push,pop,top,和getMin. 题目思路: 私用是用两 ...
- windbg命令学习3
3.进程与线程: 既可以显示进程和线程列表,又可以显示指定进程或线程的详细信息.调试命令可以提供比taskmgr更详尽的进程资料,在调试过程中不可或缺. 3.1. 进程命令 进程命令包括以下:显示进程 ...