响应式Web设计（RWD，Responsive Web Design）

响应式网页设计（RWD，Responsive Web Design）这个术语，由伊桑•马科特（Ethan Marcotte）提出。他在A List Apart发表了一篇开创性的文章，将三种已有的开发技巧（弹性网格布局、弹性图片、媒体和媒体查询）整合起来，并命名为响应式网页设计。这个术语还有一堆表示相同意思的其他叫法，如流式设计、弹性布局、塑料布局、流体设计、自适应布局、跨设备设计以及弹性设计。

[separator]

  
• 《响应式Web设计》试读：第1章：HTML5、CSS3及响应式设计入门

  
• 3步完成 Responsive Design (響應式網頁設計)

  
• 自适应

[img][attach]443[/attach][/img]

[color=#FF0000][b]响应式Web设计示例：[/b](改变浏览器窗口大小来查看页面布局的变化)[/color]
        [url=http://webdesignerwall.com/demo/adaptive-design/final.html]http://webdesignerwall.com/demo/adaptive-design/final.html[/url]
        [url=http://blog.teamtreehouse.com/]TeamTreeHouse/[/url]

[quote]
[b][size=4]Response Design的一些设计哲学[/size][/b]

1.液态网格--舍弃过去常用的像素定意，改用类似百分比的方式来自我调适
2.动态布局结构--CSS Media Query或透过JS，透过侦测屏幕大小的方式，吃不同的CSS设定，而能动态摆放每一个网页Block的位置，例如三栏改为二栏或一栏
3.显示/隐藏内容--在某些Device上，某些行为是不适合运用的，这些内容就不该被传送出来(并非隐藏，基于节省无线频宽)
4.液态图片--可以细分成以下四种行为
(1)缩放图片--这里指的是相同的图档，动态的进行缩放，这部分还算单纯
(2)响应式图片--能够依据不同的状况，抛不同的解析度图片至不同的Device，利用不同图档来节省频宽，特别是无线环境下
(3)强制禁止缩图--有些图片，例如公司Logo，就可能不愿意被同比例缩小，而是保留原始大小，就需要特别定义出来
(4)自动裁减图片--例如有的把图档设成背景来用，这样在不同的环境下，就会出现类似自动裁剪图片的效果


[b][size=4]响应式图片处理的困难之处[/size][/b]

而4.(2)的响应式图片这部分又特别复杂，
依据这篇文章http://developer.51cto.com/art/201201/312187_1.htm还会遇到不少实作上的问题，例如
(1)如何避免J ava Script Race Condition的情况，导致无法预期Server会怎么取出图档，或干脆通通都给您(浪费频宽)
(2)CDN问题，CDN快取后就可能不管到底是什么设备，通通抛相同的图档出去

所以，该篇作者写了很多的解法出来，可以解决不同的问题，但每种解法都有不同的副作用，有一些是他推荐的解法，但仍要应地制宜，怕我功力不够，误导了各位，所以强烈建议看该篇文章。

个人心得:
除了响应式图片这块看起来技术上要考虑的点比较多之外，剩下我觉得变成是CSS+JS+XHTML操作的功力了，只是落实到实作上就会有许多交互影响要小心考虑，而有经验的Response Design Development Team就会变成相对重要，特别在图档处理可能不会是简单的事，要特别留意。

以上来源：http://miin1130.pixnet.net/blog/post/28483167
[/quote]