Ethan Marcotte曾经在A List Apart发表过一篇文章“Responsive Web Design”，文中援引了响应式建筑设计的概念：

将这个思路延伸到Web设计的领域，我们就得到了一个全新的概念。为什么一定要为每个用户群各自打造一套设计和开发方案？和响应式建筑相似，Web设计同样应该做到根据不同设备环境自动响应及调整。

调整分辨率

要想做到同时兼容横、竖屏(用户还有可能在页面加载的过程中切换方向)，我们就必须考虑N种屏幕尺寸规格。诚然，我们可以将这些规格划分为几个大类，然后为每一类做一种方案，确保该方案至少在本组中尽量具有弹性。但即使这样，结果也将是无比焦虑的，谁知道某类设备在5年之后的占有率是多少？而且很多用户甚至不去将浏览器的窗口大化；类似这样的变数，我们还要考虑多少呢？

在08年之后，更多更有代表性的新设备问世并普及了。显然，我们不可以沿着“多方案”的思路继续走下去；那么我们应该怎样做呢？

几年前，弹性布局(flexible layout)几乎是一种奢侈品，所谓弹性，也只是体现在竖排布局以及字号等方面；图片始终可以轻易的破坏页面结构，而且即使是哪些弹性的元素结构，在很极端的情况下，仍会破坏布局。所以，所谓的弹性布局其实并非那样弹性，它有时甚至不能适应台式机与笔记本的屏幕分辨率差异，更不用说手机等移动设备了。

在前文提到的Ethan Marcotte的文章中，他通过一个实例展示了响应式Web设计在页面弹性方面的特性：

说到创建液态页面，最好看看Zoe Mickley Gillenwater的那本《Flexible Web Design: Creating Liquid and Elastic Layouts with CSS》，或是下载个样章先：“怎样创建弹性图片”。另外，Zoe的这篇“Essential Resources for Creating Liquid and Elastic Layouts.”提供了不少关于创建弹性网格和布局的教程、资源、创意指导和好实践方式。

如果我们将浏览器窗口不断调小，会发现logo图片的文字部分始终会保持同比缩小，保证其完整可读，而不会和周围的插图一样被两边裁掉。所以整个logo其实包括两部分：插图作为页面标题的背景图片，会保持尺寸，但会随着布局调整而被裁切；文字部分则是一张单独的图片。

其中，

元素使用插图作为背景，文字部分的图片始终保持与背景的对齐。

这个实例小小的展示一下响应式Web设计的思路。不过这点小努力还不足以避免整个布局在小尺寸窗口中变的过窄或过短，并且logo文字最终会变的小到难以识别，背景图片也会被过多的裁切。

分享标题：什么是响应式网站设计。
链接地址：http://gzruizhi.cn/view/78918.html