1.1、响应式网页设计
响应式网页设计（RWD，Responsive Web Design）这个术语，由伊桑·马科特（Ethan
Marcotte）提出。他在A List Apart 发表了一篇开创性的文章，将三种已有的开发技巧（弹
性网格布局、弹性图片、媒体和媒体查询）整合起来，并命名为响应式网页设计。这个
术语还有一堆表示相同意思的其他叫法，如流式设计、弹性布局、塑料布局、流体设计、
自适应布局、跨设备设计以及弹性设计。
1.2、浏览器视口调试工具
Internet Explorer 用户请下载安装Microsoft Internet Explorer Developer Toolbar，下载地址：http://www.microsoft.com/download/en/details.aspx?id=18359
Safari，虽然ResizeMe（http://web.me.com/aaronholla/Safari_Extensions/ResizeMe.html）的功能类似且免费，但我最爱Resize（http://resizeSafari.com）
Firefox 用户请下载Firesizer（https://addons.mozilla.org/en-US/firefox/addon/firesizer/）
Chrome 请下载Windows Resizer（https://chrome.google.com/webstore/detail/kkelicaakdanhinjdeammmilcgefonfh）
1.3、视口和屏幕尺寸
视口和屏幕尺寸不是同一个概念。视口是指浏览器窗口内的内容区域，不包含工具栏、标签栏等。也就是网页实际显示的区域。屏幕尺寸指的是设备的物理显示区域。需要注意的是有些浏览器调整工具显示的尺寸包含浏览器的其他元素，诸如地址栏、标签栏和搜索栏，而有些工具则不是这样。在下面的截图中，实际的视口尺寸显示在右上角（1156×921像素），同时Firesizer 插件将窗口尺寸显示在右下角（1171×1023 像素）。
1.4、HTML5化繁为简
- Doctype简化为<!DOCTYPE html>
- 引用<script src="js/jquery-1.6.2.js" type="text/javascript"></script>简化<script src="js/jquery-1.6.2.js"></script>，type属性不是必需的。
- 松散语法<sCRipt SrC=js/jquery-1.6.2.js></script>
5.新语义化标签
<!--制作标准的HTML 页面时，头部和导航一般都是标配，如下所示：-->
<div class="header">
<div class="navigation">
<ul class="nav-list">
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="About">About</a></li>
</ul>
</div> <!—end of navigation -->
</div> <!—end of header -->
<!--看看我们用HTML5 如何实现：-->
<header>
<nav>
<ul id="nav-list">
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="About">About</a></li>
</ul>
</nav>
</header>
2.1媒体查询
CSS3 是由很多附加模块组合而成的，媒体查询就是其中的一个模块。媒体查询可以让我们根据设备显示器的特性为其设定CSS 样式。
2.2媒体查询检测的特性
最常用的是设备的视口宽度（width）和屏幕宽度（device-width）。
- width：视口宽度。
- height：视口高度。
- device-width：渲染表面的宽度（对我们来说，就是设备屏幕的宽度）。
- device-height：渲染表面的高度（对我们来说，就是设备屏幕的高度）。
- orientation：检查设备处于横向还是纵向。
- aspect-ratio：基于视口宽度和高度的宽高比。一个16∶9 比例的显示屏可以这样定义aspect-ratio: 16/9。
- device-aspect-ratio：和aspect-ratio 类似，基于设备渲染平面宽度和高度的宽高比。
- color：每种颜色的位数。例如min-color: 16 会检测设备是否拥有16 位颜色。
- color-index：设备的颜色索引表中的颜色数。值必须是非负整数。
- monochrome：检测单色帧缓冲区中每像素所使用的位数。值必须是非负整数，如monochrome: 2。
- resolution：用来检测屏幕或打印机的分辨率，如min-resolution: 300dpi。还可以接受每厘米像素点数的度量值，如min-resolution: 118dpcm。
- scan：电视机的扫描方式，值可设为progressive（逐行扫描）或interlace（隔行扫描）。如720p HD 电视（720p 的p 即表明是逐行扫描）匹配scan: progressive，而1080i HD 电视（1080i 中的i 表明是隔行扫描）匹配scan: interlace。
- grid：用来检测输出设备是网格设备还是位图设备。
2.3 IE8及更低版本增加媒体查询
Respond.js（https://github.com/scottjehl/Respond） ，但它目前无法解析CSS 的@import 命令。建议在已有的样式表中追加媒体查询样式。如下语法：@media screen and (max-width: 768px) {/*样式*/}
2.4 安装 iOS 模拟器和Android 模拟器
Android 软件开发工具包（SDK）也可以免费安装。下载地址是http://developer.android.com/sdk/。
iOS 模拟器是Xcode开发包（在Mac App Store 中免费下载）的一部分，只能在Mac OS X 上使用。
2.5 响应式设计中内容始终优先
窄视口设备的用户应该先看到主内容，而后再看到侧边栏。
3 拥抱流式布局
3.1