BeFor Web
为网而生 - 关注互联网及移动端产品的用户体验设计

什么是响应式Web设计?怎样进行?: Page 2 of 4

什么是响应式Web设计?怎样进行?

弹性图片

响应式Web设计的思路中,一个重要的因素是怎样处理图片方面的问题。有很多同比缩放图片的技术,其中有不少是简单易行的。其中,由Richard Rutter最先尝试的一种做法比较流行,即使用CSS的max-width属性。这个方法在Ethan Marcotte的液态图片一文中也有提到。

img { max-width: 100%;}

只要没有其他涉及到图片宽度的样式代码覆盖掉这一行规则,页面上所有的图片就会以其原始宽度进行加载,除非其容器可视部分的宽度小于图片的原始宽度。上面的代码确保图片最大的宽度不会超过浏览器窗口或是其容器可视部分的宽度,所以当窗口或容器的可视部分开始变窄时,图片的最大宽度值也会相应的减小,图片本身永远不会容器边缘隐藏和覆盖。实际上,就像Jason Grigsby在他的CSS Media Query for Mobile is Fool’s Gold一文中提到的,“液态图片背后的思路,就是无论何时,都确保在其原始宽度范围内,以最大的宽度同比完整的显示图片。我们不必在样式表中为图片设置宽度和高度,只需要让样式表在窗口尺寸发生变化时辅助浏览器对图片进行缩放。” 一种简而美的方法。

图片本身的分辨率及加载时间是另外一个需要考虑的问题。虽然通过上面的方法,可以很轻松的缩放图片,确保在移动设备的窗口中可以被完整浏览,但如果原始图片本身过大,便会显著降低图片文件的下载速度,对存储空间也会造成没有必要的消耗。

响应式图片

由Filament Group提出的“响应式图片”技术思想,有助于解决上面提到的问题:不仅要同比的缩放图片,还要在小设备上降低图片自身的分辨率。可以看下demo页面先。

responsive-web-design-flexible-image-filamentgroup

这个技术的实现需要使用几个相关文件,我们可以在Github上获取。包括一个JavaScript文件(rwd-images.js),一个.htaccess文件,以及一些范例资源文件。具体使用方法可以参考Responsive Images的说明文档。大致的原理是,rwd-images.js会检测当前设备的屏幕分辨率,如果是大屏幕设备,则向页面head部分中添加BASE标记,并将后续的图片、脚本和样式表加载请求定向到一个虚拟路径“/rwd-router”。当这些请求到达服务器端,.htacces文件会决定这些请求所需要的是原始图片还是小尺寸的“响应式图片”,并进行相应的反馈输出。对于小屏幕的移动设备,原始尺寸的大图片永远不会被用到。

这项技术支持多数的现代浏览器,包括IE8+、Safari、Chrome和Opera,以及这些浏览器的移动设备版本;在FireFox及一些旧浏览器中,则会优雅降级:我们仍可得到小图片的输出,但同时,原始大图也会被下载。

禁用iPhone中的图片自动缩放

在iPhone及iPod Touch中,页面会被自动的同比例缩小至最适合屏幕大小的尺寸,x轴不会产生滚动条,用户可以上下拖拽浏览全部页面,或在需要的时候放大页面的局部。这里会产生一个问题,即使我们运用响应式Web设计的思想,专门为iPhone的小屏输出小图片,它同样会随着整个页面一起被同比例缩小,如下图左侧所示

responsive-web-design-iphone

我们可以使用苹果专有的一些meta标记来解决类似的问题。在页面的<head>部分添加以下代码(详情可以参考Think Vitamin的相关文章):

<meta name="viewport" content="width=device-width; initial-scale=1.0">

将initial-scale的值设定为“1”,即可覆写默认的缩放方式,保持原始的尺寸及比例。更多关于viewport meta标记的用法,可以参考苹果官方的文档

译文代表原作者观点。欢迎发表评论,或到译者微博进一步交流探讨。

本站原创编译文章。如需转载,请注明:本文来自Be For Web
译者信息: C7210 - UX 设计师,设计布道者,译者,猫奴,音乐玩家。
评论 (47)
关于这篇译文在语法方面的建议。“安静的窝在家里做做博客、学做些新东西”与“响应式的做到元素的同比缩放、布局结构的改变、内容的优化调整”中,“安静的”和“响应式的”都应该是副词,译文翻译为形容词,这好比英文中,adj.与adv.混用了。个人愚见,谢谢。
在其他网站看到你的文章,发现其中portrait和landscape与你原文翻译的相反,portrait很明显是竖屏,landscape明显是横屏,为什么会这样,转载的文章会对原文进行了修改,这对原创是一种影响。
博主感觉web后台应该学习什么呢?预测一下主流后台是PHP还是Node.js??
博主,做web响应式设计的时候作为设计师应该注意哪些,目前查到的多是和前端相关的。。求指教
今天遇到这个问题了 一下 就搜到这篇了 博主 我要怎么感谢你:P
有用就好:)
感谢分享
谢谢支持
文章不错,楼主搞得很细,让我知道响应式一些知识主干
有用就好:)
写的很好。图文并茂。容易理解。
写的内容相当不错 很受用。。。。
有用就好,多交流:)
博主很强大~~学习了。
过奖,多交流的:)
最近正在做html5的手机端页面,这篇文章很有用啊
有用就好=)
难得好文章,感谢翻译,分享~
谢谢支持
响应式设计确实很好,但是如果兼容各种平台工作量相当之大,而且庞大的CSS代码也是累赘,而且还没得测试!如何保证做出来的页面能够完美的兼容?
hi,我个人觉得所谓响应式设计,本身就是一种折中性质的方案,要考虑和权衡的方面很多;所以通过这样的方式寻求完美恐怕也不是很合乎实际,特别是您提到的这种很现实的问题。不能算是很到位的回答,抱歉=P
其实我也不是否定这种响应式设计的方案。这种方案做出来的效果确实非常OK,只不过结合实际应用的话确实有一定的考虑。但是如果某些网站只兼容比如说主流的平台 桌面 iphone ipa Android 如果是这样的话,比起针对每个平台都去做一个独立的版面样式的话 。那果断的这种响应式设计有它的优势。比如说QQ的产品 3G.qq.com 针对N个平台做了N个板式。这种纯属是被这N个平台强奸了自己的劳动力,你说的也对 “本身就是一种折中性质的方案,要考虑和权衡的方面很多” 毕竟现在没有很完美的的方案来解决,只能在实际应用中自己去权衡。但是有一点是可以肯定的这种响应式设计的肯定在以后会是主流,只不过是时间的问题。个人拙见~还望博主指点。
hi,我理解当中,响应式主要解决的是同一套内容及结构在不同“尺寸”显示设备当中的表现,而不是平台;当然也许您一直用平台这个词其实就是在指设备的显示规格方面的区别。在我看来这种方式只是一种锦上添花的方式而已,它并不等同于Web App这样的概念。比如我自己的这个博客,我知道它在Pad及iPhone当中完全可以通过响应式的方法来改善呈现方式,但是我不是很在意,因为网站本身没达到这种需求程度,而有这类需求的网站产品,可以花些时间针对几种典型的尺寸规格来定义输出样式;也许他需要面对N多平台,但真正需要特别定义的只有3到5种典型尺寸规格。
嗯,其实我说的平台的意思就是指不同设备。可能我没表达清楚我的意思。确实该怎么用,该不该用,需不需要用,等等这些问题都是结合自己本身的需求。作为一个前端,当然我是比较迎合这种响应式设计,我觉得很新颖,很创新。你说的对,它并不等同于Web App这样的概念。只不过是在不同设备中表现的一种设计方法。哈哈。半夜没睡着,爬文呢。BZ的内容都写的不错。以后常来...
重读此文,受益匪浅。
很受益的东西,有空经常过来!
欢迎常来=)
写的很好,受益匪浅。值得收藏的一篇文章。
谢谢支持=) 还望多交流指正的
感谢翻译~~太棒了!!
谢谢 =)
我们正想解决这个问题呢,受益匪浅!
嘿嘿有用就好的
翻译给力!赞!看原文通常都很没耐心看完,看您的译文觉得事半功倍好多!谢谢!
=) 谢谢支持
很受用,如果自己读E文版的肯定很晦涩,翻译的很棒。
谢谢支持,多多交流;翻译方面自己也是玩票,还麻烦多指正的
太棒了,以后天天来学习
欢迎常来,多交流=)
大哥,你的个人站点好多呀。永远支持
被发现了...多谢...你的应酷很赞啊
谢谢分享!
谢谢支持,欢迎常来=)
写得很详细,学了不少。谢谢分享
有用就好,谢谢支持=)
谢谢你的分享,这篇文章确实帮助到了我,谢谢。
谢谢,欢迎常来玩=)