什么是响应式设计？iOS 和 Android 的发布，智能手机、平板电脑、智能家电等新设备层出不穷，极大便利了我们的生活，但面对形形色色的终端设备，千差万别的屏幕分辨率，给网页设计带来了新的挑战，我们无法估计用户的终端设备和网络状况，更不可能为每种设备都专门设计一套网站，如何实现 Web UI 在多终端中的适配呢？2010 年 Ethan Marcotte 曾经在 A List Apart 发表过一篇文章"Responsive Web Design"，响应式网页设计提供了一种设计方法，可以使同一网站在智能手机、桌面电脑，以及介于这两者之间的任意设备上完美显示。这种方法能够根据用户的屏幕尺寸，合理地为现有及将来的各种设备提最佳的浏览体验。
这是一个响应式设计创意收集网站，可以在上面查看到很多响应式设计实例，较多的网站都应用了 Mobile First 设计思想，先针对小视口设备进行设计，然后逐步对大视口设计进行渐进增强支持。
图 1. Froont 响应式设计网站截屏 这也意味着设计思维的转换，不应再执着于布局、线框等的具体大小，而应该考虑如何使用流体元素。与其根据不同设备的大小来设计页面，更着重考虑如何针对内容进行设计。抛弃像素，抛弃固定宽度，先从小屏幕进行设计，然后逐步增强针对大屏幕的设计
当然也需要引导客户，网站不必在所有浏览器中表现一致，时间应该花在更有价值的地方，而不是花大量时间修复烂浏览器固有的缺陷。核心思想就是，优雅降级，内容优先。
响应式设计是最佳选择吗？实际项目中，什么时候我们需要用到响应式设计呢？并非所有的页面呈现，内容设计问题都可以通过响应式设计思路解决，项目的预算、目标用户及定位决定了其实现方式。
举几个例子来说，如果一个提供促销内容的网站，我们可以通过 CSS3 媒体查询技术，根据视口大小为用户提供与之匹配的视觉效果，迎合小屏幕的同时兼容超大屏幕，不同的视觉展示方式来响应各种设计大小，提供更好的用户体验和无歧视的设计，比如为小屏幕提供更容易手指操作的设计同时，为超大屏幕提供内容也能提供额外改进，这时响应式设计是优选。如果是一个预算充足的点餐网站，定制一个真正的“手机移动版”更为合适，用户可基于 GPS 找到附近的店家点餐，或者是一个 dashboard 网站，有大量的数据内容和管理命令，此时单独的响应式设计方案远远不能支撑这种解决方案。任何工具或技术都应该只在应用程序需要它的时候使用，IE 7 和 8 不支持 HTML5、CSS3 的新属性。如果一个网站的绝大多数用户都使用 IE 7 或 8，或更低版本，做成响应式意义也不大，但不代表做不到。
总结下来，响应式设计的优点是灵活性强，适应不同分辨率的设备，缺点是兼容各种设备导致代码臃肿，加载时间加长。
选择在现有代码基础上的增强的折中性响应式设计？还是选择一个真正的“手机版”，要依赖于项目实际情况。
什么是视口(viewport)和屏幕尺寸(screen.width)？视口和屏幕尺寸不是同一个概念。视口(viewport），即可视区域的大小，是指浏览器窗口内的内容区域，不包含工具栏、标签栏等。也就是网页实际显示的区域。屏幕尺寸指的是设备的物理显示区域，用户屏幕的整体大小。 |
