第8章 响应式设计

今天的网页布局必须能根据它自己所处的不同环境作出响应。大屏幕上的最佳体验和手机中的最佳体验有着天壤之别。在大屏幕上，可能使用多栏布局效果很不错，但多栏布局到了手机上，每一栏都会窄得没法看。此时，所有内容“鱼贯而行”，即用一个栏来组织成了唯一可行的方案。这样，用户使用简单的扫屏手势，就可以轻松自如地滚动屏幕来阅读了。

实际上，使用一项叫媒体查询的CSS功能，很容易检测出用户设备的屏幕大小。然后，据以提供替代或额外的CSS，可针对相应屏幕实现更加优化的体验。使用这种方式创建对设备有感知力的网站，被称为响应式设计。

本章仍然以第7章的那个为桌面浏览器设计的页面为基础，向大家依次展示在屏幕越来越小的设备上优化这个页面的全过程。

虽然我们是要修改浏览器版以适应小屏幕，但实际上真正的设计原则是“移动先行”。推荐大家读一读Luke Wroblewski的文章：http://www.lukew.com/ff/entry.asp?933，还有A Book Apart出版的他的一本书：Mobile First。