理解了可伸缩图像、弹性布局和媒体查询的知识之后，就可以将它们组合在一起，创建响应式网页。本节将重点介绍页面扩张或收缩时切换内容的显示方式所需要考虑的要点。重要的是了解如何建立响应式网站，以及用于实现响应式网站的媒体查询类型。完整的样式需要读者参考示例源代码。注意，并不需要先做出一个定宽的设计，再将它转换成响应式的页面。
第1步，创建内容和HTML。
在动手设计响应式设计之前，应该把内容和结构设计妥当。如果使用临时占位符设计和构建网站，当填入真正的内容以后，可能会发现形式与内容结合得不好。因此，应该尽可能地将内容采集工作提前。具体操作就不再展开。
在head元素中添加<meta name= "viewport" content="width=device-width, initialscale=1"/>。关于这行代码的作用，可以参考上一节说明。
第2步，遵循移动优先为页面设计样式，推荐在设计网页时也遵循这一点。
首先，为所有的设备提供基准样式。这同时也是旧版浏览器和功能比较简单的设备显示的内容。基准样式通常包括基本的文本样式（字体、颜色、大小），内边距、边框、外边距和背景（视情况而定），以及设置可伸缩图像的样式。通常，在这个阶段，需要避免让元素浮动，或对容器设定宽度，因为最小的屏幕并不够宽。内容将按照常规的文档流由上到下进行显示。
网站的目标是在单列显示样式中是清晰的、中看的。这样，网站对所有的设备（无论新旧）都具有可访问性。在不同设备下，外观可能有差异，不过这是在预期之内的，完全可以接受。
第3步，从基本样式开始，使用媒体查询逐渐为更大的屏幕，或其他媒体特性定义样式， 如orientation。大多数时候，minwidth和max-width 媒体查询特性是最主要的工具。
这是渐进增强在实战中的应用。处理能力较弱的（通常也是较旧的）设备和浏览器会根据它们能理解的CSS 显示网站相对简单的版本。处理能力较强的设备和浏览器则显示增强的版本。所有人都能获取到网页的内容。
/* 基准样式
----------------------------------- */
body {
font: 100%/1.2 Georgia, "Times New Roman", serif;
margin: 0;
...
}
* { /* 参见示例源代码 */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.page {
margin: 0 auto;
max-width: 60em; /* 960px */
}
h1 {
font-family: "Lato", sans-serif;
font-size: 2.25em; /* 36px/16px */
font-weight: 300;
...
}
.about h2, .mod h2 {font-size: .875em; /* 15px/16px */}
.logo, .social-sites,.nav-main li {text-align: center;}
/* 创建可伸缩图像 */
.post-photo, .post-photo-full,.about img, .map {
max-width: 100%;
}
第4步，应用于所有视觉区域（小屏幕和大屏幕设备）的基准样式示例，效果如图1所示。这些样式规则与上一节介绍的代码是类似的，只是它们没有由媒体查询包围。注意，本例为整个页面设定了60em 的最大宽度（通常等价于960 像素），并使用auto外边距让其居中。还让所有的元素使用boxsizing:border-box;，将大多数图像设置为可伸缩图像，
图1 页面结构默认显示效果
上图仅应用了基础样式的页面效果。这个页面在所有的浏览器中都是线性的，右侧的部分出现在左侧部分的下面。也是不支持媒体查询的旧浏览器中页面的显示效果。在这种状态下，依然保持了很高的可用性。由于没有设定容器宽度，因此在桌面浏览器中查看页面时，内容的宽度会延伸至整个浏览器窗口的宽度。
第5步，逐步完善布局，使用媒体查询为页面中的每个断点（breakpoint）定义样式。断点即内容需作适当调整的宽度。在本例中，应用基准样式规则后，为下列断点创建了样式规则。
注意，对于每个最小宽度（没有对应的最大宽度），样式定位的是所有宽度大于该minwidth值的设备，包括台式机及更早的设备。
第6步，最小宽度为20em，通常为320像素。定位纵向模式下的iPhone、iPod touch、各种Android 以及其他移动电话。
/* 基准样式
----------------------------------- */
...
/* 20em (大于等于320px)
----------------------------------- */
@media only screen and (min-width:20em) {
.nav-main li {
border-left: 1px solid #c8c8c8;
display: inline-block;
text-align: left;
}
.nav-main li:first-child {
border-left: none;
}
.nav-main a {
display: inline-block;
font-size: 1em;
padding: .5em .9em .5em 1.15em;
}
}
这里针对视觉区域不小于20em 宽的浏览器修改了主导航的样式。设计body元素字体大小为16 像素的情况下，20em通常等价于320 像素，因为20×16 ＝ 320。这样，链接会出现在单独的一行，而不是上下堆叠，如图2所示。
图2 小屏显示效果
这里没有将这些放到基础样式表中，因为有的手机屏幕比较窄，可能会让链接显得很局促，或者分两行显示。
第7步，最小宽度为 30em，通常为 480 像素，如图17.4所示。定位大一些的移动电话，以及横向模式下的大量320 像素设备（iPhone、iPodtouch 及某些Android 机型）。
图3 中屏显示效果
第8步，最小宽度介于30em（通常为480像素）和47.9375em（ 通常为767 像素）之间。这适用于处于横向模式的手机、一些特定尺寸的平板电脑（如Galaxy Tab 和Kindle Fire），以及比通常情况更窄的桌面浏览器。
第9步，最小宽度为48em，通常为768像素。这适应于常见宽度及更宽的iPad、其他平板电脑和台式机的浏览器。
主导航显示为一行，每个链接之间由灰色的竖线分隔。这个样式会在iPhone（以及很多其他的手机）中生效，因为它们在纵向模式下是320 像素宽。如果你希望报头更矮一些，可以让标识居左，社交图标居右。将这种样式用在下一个媒体查询中，代码如下：
/* 基准样式 */
...
/* 20em （大于等于320px）*/
@media only screen and (min-width: 20em) {
...
}
/* 30em （大于等于480px）*/
@media only screen and (min-width: 30em) {
.masthead { position: relative; }
.social-sites {
position: absolute;
right: -3px;
top: 41px;
}
.logo {
margin-bottom: 8px;
text-align: left;
}
.nav-main { margin-top: 0; }
}
现在，样式表中有了定位视觉区域至少为30em（通常为480 像素）的设备的媒体查询。这样的设备包括屏幕更大的手机，以及横向模式下的iPhone。这些样式会再次调整报头。
第10步，在更大的视觉区域，报头宽度会自动调整。
/* 30em（大于等于480px）*/
@media only screen and (min-width: 30em) {
... 报头样式 ...
.post-photo {
float: left;
margin-bottom: 2px;
margin-right: 22px;
max-width: 61.667%;
}
.post-footer { clear: left; }
}
第11步，继续在同一个媒体查询块内添加样式，让图像向左浮动，并减少其max-width，从而让更多的文字可以浮动到其右侧。文本环绕在浮动图像周围的断点可能跟此处用的不同。这取决于哪些断点适合内容和设计。为适应更宽的视觉区域，一般不会创建超过48em 的断点。也不一定要严格按照设备视觉区域的宽度创建断点。如果一个基于(min-width:36em) 的断点非常适合的内容，就可以大胆地使用这个断点。
/* 基准样式*/
/* 20em（大于等于320px）*/
@media only screen and (min-width: 20em) {
...
}
/* 30em（大于等于480px） */
@media only screen and (min-width: 30em) {
...
}
/* 30em – 47.9375em(在480px和767px之间) */
@media only screen and (min-width: 30em) and (max-width: 47.9375em) {
.about { /* self-clear float */
overflow: hidden;
}
.about img {
float: left;
margin-right: 15px;
}
}
第12步，让关于自己图像向左浮动。不过，这种样式仅当视觉区域的宽度在30em和47.9375em 之间时才生效。超过这个宽度会让布局变成两列布局，关于自己文字会再次出现在图像的下面。浮动的关于自己图像已显示为其本来的尺寸（270 像素宽），它旁边的空间太小，无法很好地容纳文本。这就是之前减少其max-width的原因。
/* 基准样式*/
...
/* 20em（大于等于320px）*/
@media only screen and (min-width: 20em) {
...
}
/* 30em（大于等于480px）*/
@media only screen and (min-width: 30em) {
...
}
/* 30em～47.9375em（在480px和767px之间）*/
@media only screen and (min-width: 30em) and (max-width: 47.9375em) {
...
}
/* 48em（大于等于768px）*/
@media only screen and (min-width: 48em) {
.container {
background: url(../img/bg.png) repeat-y 65.9375% 0;
padding-bottom: 1.875em;
}
main {
float: left;
width: 62.5%; /* 600px/960px */
}
.sidebar {
float: right;
margin-top: 1.875em;
width: 31.25%; /* 300px/960px */
}
.nav-main { margin-bottom: 0; }
}
这是最终的媒体查询，定位至少有48em 宽的视觉区域，如图4所示。该媒体查询对大多数桌面浏览器来说都为真，除非用户让窗口变窄。它同时也适用于纵向模式下的iPad 及其他一些平板电脑。
图4 大屏显示效果
在桌面浏览器中（尽管要宽一些）也是类似的。由于宽度是用百分数定义的，因此主体内容栏和附注栏会自动伸展。
第13步，在发布响应式页面之前，应在移动设备和桌面浏览器上对其测试一遍。构建响应式页面的时候，用户可以放大或缩小桌面浏览器的窗口，模拟不同手机和平板电脑的视觉区域尺寸。然后再对样式进行相应的调整。这当然是一种不够精细的办法，但它确实有助于建立有效的样式，从而减少在真实设备上优化网站的时间。
第14步，对Retina 及类似显示屏使用媒体查询。针对高像素密度设备，可以使用下面的媒体查询：
@media (-o-min-device-pixel-ratio: 5/4),(-webkit-min-device-pixel-ratio:1.25),(min-resolution: 120dpi) {
.your-class {
background-image:url(sprite-2x.png);
background-size: 200px 150px;
}
}
注意，background-size 设置成了原始尺寸，而不是400 像素×300 像素。这样会让图像缩小，为原始尺寸创建的样式对2x 版本也有效。