响应式网页开发设计与实际应用 _响应式

手机、pad层出不穷，没有个统一标准，我们又不想失去任何一个用户，这可苦了我这些设计师了，需要付出更多的心血来获得更好的体验，谁让我们是射击湿呢。
电子产品更新换代节奏都快成马了，跟都跟不上。对于网站来说根本不可能为每种设备都开发个版本出来，结果就是赢得鱼，却失去了熊掌，不过我们还是有办法的。
响应式Web设计(Responsive Web design)，理念是设计和开发应根据屏幕的大小、平台的用户的行为和环境基础上自动调整；他应该有一个灵活的网格和布局，图像和css能够智能的组合使用。
比如说用户从电脑切换到ipad，网站能够自动切换以适应分辨率，图像大小和脚本。
换句话说，网站应该具备根据用户的使用环境来自动调整，这可以减少不必要的重复设计。
响应式Web设计的概念
Ethan Marcotte曾经在A List Apart发表过一篇文章“Responsive Web Design”，文中援引了响应式建筑设计的概念：
所谓响应式建筑设计就是设计师尝试建造一种使用一些传感器检测周围环境，比如说温度、湿度、光线等等自动进行调整的房子。
现在我们把这个思路延伸到 WEB设计领域。
我们可以想，为啥我们要为每个用户群各自打造一套设计方案呢？我们太笨了，有没有更智能的做法？和响应式建筑设计一样，web设计也应该做到智能调整。
显然web设计不能使用传感器，这就要更多的抽象思维。好在现在一些概念已经得到实践了，比如液态布局、帮助页面重新格式化的media queries和脚本等。但是响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式。
调整分辨率
不同的设备都有各自的屏幕分辨率、清晰度以及屏幕定向方式，不断被研发的各种新设备也将出现新的屏幕尺寸规格。
有些设备基于横屏 (portrait)，有些是竖屏(landscape)，甚至还有正方形；对于日益流行的iphone、iPad及其他一些智能手机、平板电脑，用户还可以通过转动设备来任意切换屏幕的定向方式。
怎样才能做到让一种设计方案满足所有情况？

文章插图
要想做到同时兼容横、竖屏(用户还有可能在页面加载的过程中切换方向)，我们就必须考虑N种屏幕尺寸规格。
我们可以将这些规格划分为几个大类，然后为每一类做一种方案，确保该方案至少在本组中尽量具有弹性。
但即使这样，结果也将是非常不爽的，谁知道某类设备在5年之后的占有率是多少？而且很多用户甚至不去将浏览器的窗口最大化；天哪，哥受不了了……
Morten Hjerde和他的哥们对2005至2008年市场中的400余种移动设备进行了统计(查看报告)，下图为大致统计结果：

文章插图
在08年之后，更多更有代表性的新设备问世并普及了。
显然，我们不可以沿着“多方案”的思路继续走下去；那么我们应该怎样做呢？
部分解决方案：一切弹性化
几年前，弹性布局(flexible layout)几乎是一种奢侈品，所谓弹性，也只是体现在竖排布局以及字号等方面；图片尺寸无法变化，这就导致图片破坏了页面结构，而且即使是有弹性的元素，在很多情况下他会乱弹，仍然是一塌糊涂。
所以，所谓的弹性布局其实并非那样弹性，它有时甚至不能适应台式机与笔记本的屏幕分辨率差异，更不用说手机等移动设备了。
现在，我们可以通过响应式的设计和开发思路让页面更加”弹性”了。
图片的尺寸可以自动调整，页面布局再不会被破坏。虽然永远没有最完美的方案，但它给了我们更多选择。
无论用户切换设备的屏幕定向方式，还是从台式机屏幕转到iPad上浏览，页面都会真正的富有弹性。
在前文提到的Ethan Marcotte的文章中，他通过一个实例展示了响应式Web设计在页面弹性方面的特性：