自适应网页设计（Responsive Web Design）是一种网页设计方式，主要目标在于使得网页在不同分辨率的多种设备都能都良好呈现。
自适应网页设计的关键在于使用 media query，针对不同宽度的屏幕使用不同的样式。
例如，一般我们的网页有顶栏，侧栏，内容栏，和底栏。我们可以设定对于屏幕宽度大于等于 768 的设备，正常显示。对于屏幕宽度小于 768 的设备，将侧栏放在内容栏下面。如果屏幕宽度还小于 480，我们可以将顶栏的横向列表折叠成下拉菜单。
IE6 - IE8 不支持 media query，它们将忽略 html 文件中包含 media query 的 <link> 标签，以及 CSS 文件中包含 media query 的样式定义。我们可以用 css3-mediaqueries.js 补全这个功能。只需要在页面的 <head> 中加入如下代码：
<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
实际上，旧版本 IE 只在桌面电脑中使用，因此我们完全可以不管它，即不对它们作自适应调整，而总是使用最大宽度的样式。这也是 Bootstrap 中的做法。例如，当用支持 media query 的浏览器打开这个页面
http://twitter.github.com/bootstrap/scaffolding.html
并且将浏览器的宽度缩小到 980px 以下时，该页面的顶栏菜单会自动折叠成下拉菜单，而用旧版本 IE 时没有这种变化。
在针对移动设备进行设计时，我们可以用 Opera Mobile Emulator 这个桌面软件，它可以模拟多个手机或平板，也可以连接 Opera Dragonfly 进行远程调试，非常方便。
参考资料：
[1] Responsive web design - Wikipedia, the free encyclopedia
[2] 自适应网页设计（Responsive Web Design） - 阮一峰的网络日志
[3] 响应式布局这件小事 | 觉唯前端
[4] 什么是响应式Web设计？怎样进行？ | Be For Web - 为网而生
[5] CSS Media Queries & Using Available Space | CSS-Tricks
[6] Scaffolding #responsive · Bootstrap
[7] What media type should I use in Responsive Web Design?
[8] Responsive Web Design With Physical Units
[9] Opera Mobile Emulator - Opera Software
[A] Opera Mobile Emulator for desktop - Dev.Opera
