这是一个移动为王的时代，前段时间移动端的流量首次超过桌面端，这并非说桌面端就不重要了，只是趋势摆在这里，由不得你不适应。不得不说，移动端的信息获取更为方便，如何让web在移动端取得良好的效果，响应式Web设计应运而生。看完这一章你就会明白，所谓的响应式并没有看上去那么复杂，更多的时候，你只需将桌面版的CSS略加修改，就能完全取得能自动适应屏幕尺寸和分辨率的响应式网站，听起来不坏，是吗？
一 、响应式Web设计概述
以前，为了满足移动用户的需求，需要额外设计一个专门针对移动设备的网站，但现在已经越来越少见了，因为各类尺寸的移动设备层出不穷，难道你还能逐个适配吗？这样效率就太低了，代码重用率也很低。幸好我们有更好的办法，让同一个网站在不同尺寸和分辨率的设备上体现不同的显示效果！
Ethan Marcotte为我们提供了如何实现这种效果的蓝图，并将相应的方法命名为响应式Web设计，他的方法根植于以下三点：
1 、灵活的图像和媒体。图像和媒体资源的尺寸是用百分数定义的，从而可以根据环境进行缩放。
2 、灵活的、基于网格的布局，也就是流式布局。对于响应式网站，所有的width属性都用百分数设定，因此所有的布局成分都是相对的，其他水平属性通常也会使用相对单位（em，百分数和rem等）。
3 、媒体查询。使用这项技术，可以根据媒体特征，如浏览器可视页面区域的宽度对设计进行调整。
二 、创建可伸缩图像
我们已经从前面了解到，默认情况下，图像显示的尺寸是HTML中指定的width和height，如果不指定这些值，图像将按原尺寸显示，也可以在CSS中修改图像元素的width和height。但是这样带来的后果是，如果屏幕小于设定的尺寸，图像就不可能完整的显示在页面上，这样的阅读体验并不好，所以我们需要图像能自动的在可用空间内缩放，但不会超过其本来的大小。
1 、首先，对任何要创建可伸缩的图像，忽略width和height属性
2 、在样式表中，对每个可伸缩的图像应用max-100%
注意：这里图像的可用空间是指有其父元素建立的内容区域，如果有内边距的话，可用空间会适当减少。对于video，embed和object元素也可以如此操作。
三 、创建弹性布局网格
拥有定宽容器的网页有些死板。如果桌面浏览器的宽度小于页面宽度，就会出现横向滚动条，如果让移动浏览器显示完整的宽度，页面就会显得很小，不太友好，这对响应式来说并不合适。我们希望页面能进行缩放，并正好适应浏览器视觉区域大小，就像可伸缩图像一样。流式布局，又称弹性布局便可以做到这一点。
创建弹性布局需要使用百分数宽度，并将它们应用于页面里的主要区域。
.page{ max-960px; }
main{ 62.5%; }
.sidebar{ Width:31.25%; } |
这个例子相信都能看懂，先为父元素设置max-width属性为一个固定的数值，如960px，接着根据要为子元素指定的宽度/父元素宽度=相对的宽度值。这样一来，无论页面有多宽，那两部分的比例是没有变化的，父元素的max-width属性也决定了整个页面的弹性伸缩，但不会超过设定的最大值。
还可以对元素设置基于百分数的margin和padding，但更常见的是为这些属性设置为em单位的，因为内边距和外边距地em值是相对于元素的font-size的，而百分数则是相对于包含元素的容器的。
四 、理解和实现媒体查询
媒体查询增强了媒体类型（@media print,screen）方法，允许根据特定的设备特性定位样式，让其适应不同的屏幕尺寸。这里有一些可以包含在媒体查询里的媒体特性：
宽度
height:高度
device-设备宽度
device-height:设备高度
orientation:方向
aspect-ratio:高宽比
device-aspect-ratio:设备高宽比
color:颜色
color-index:颜色数
monochrome:单色
resolution:分辨率
scan:扫描
grid:栅格
除了orientation、scan和grid以外，上述属性均可添加min-和max-前缀，min-前缀定位的是"大于等于"对应值的目标，而max-前缀对应的是"小于等于"对应值的目标。
这里我们着重介绍的是min-width和max-width，因为它们是制作响应式页面反复用到的两个媒体特性。
1 、媒体查询的基本语法
指向外部样式表的链接：
<link rel="stylesheet" media="logic type and (feature:value)" href="css/style.css"> |
位于样式表中的媒体查询：
@media logic type and (feature:value){/*CSS的规则*/} |
简单说一下：
logic:这个是可选的，其值可以是only或not，only关键字可以确保旧的浏览器不读取余下的媒体查询，同时一并忽略链接的样式表。not关键字可以对媒体查询取反
type:这个是媒体类型，如print、screen或者all
feature:value这个是可选的，但是一旦有就要用括号包围，且前面要有"and"这个关键字。feature是预定的关键字，如min-width、max-width或者resolution等
看不懂就对了，这只是一些通用语法，这里举几个例子：
<link rel="stylesheet" media="all" href="css/style.css"> <link rel="stylesheet" media="only screen and (min- 480px)" href="css/style-480.css"> |
意思是：style.css的样式用于所有的输出设备，而对视觉区域宽度不小于480像素的浏览器应用style-480.css里的样式。先后顺序不能搞混！
换种形式写：
@media only screen and (min- 480px) { /*CSS规则*/ } |
效果是一样的！
注意：
1 、最常用到的是min-width和max-width，一定要灵活使用，示例用的是像素，但在实际中最好用em。
2 、可以用and将多个特征：值的组合串接起来，还可以创建一系列媒体查询，用逗号分隔即可。
3 、最最需要注意的是，在页面的head元素里我们要添加<meta name="viewport" content ="width=device-width, initial-scale=1">使视觉区域的宽度与设备宽度相同，否则有的时候你取不得预期的效果，尤其是在iPhone设备上。
五 、组合使用
在理解了可伸缩图像、弹性布局和媒体查询的知识之后，就可以将它们组合在一起，创建响应式网页。需要说明的是，并不需要事先做出一个定宽的设计，再将它转换成响应式的页面，完全可以从零开始构建。
1 、创建内容和HTML
一切都应该从可靠的、认真考虑过的内容开始。这是渐进增强的基础，"内容就是一切"，在网站建立之初，就应该把所有的资料都收集好，然后对内容进行良好的标记，这才是好的开始！
2 、 移动优先方法
推荐在设计网页时遵循移动优先的原则。具体过程如下：
A 、首先，为所有的设备提供基准样式，这通常是旧版浏览器和功能比较简单设备显示的内容。基准样式通常包括基本的文本样式（字体、颜色、大小），内边距，边框，外边距和背景，以及设置可伸缩图像的样式。通常在这个阶段要避免元素浮动，或对容器设置宽度，因为最小的屏幕并不够宽。内容将按照常规的文档流自上到下显示。此时的目标，是在单列显示样式中是清晰的、可看的，这样网站对于所有的设备都具有访问性，虽然外观不是特别理想，但完全在考虑的范围内。
B 、从这种样式开始，使用媒体查询逐渐为更大的屏幕定义样式。大多数时候，min-width和max-width媒体查询特性是最常用的！这是渐进增强在实战中的应用，处理能力弱的设备和浏览器会根据它们能理解的CSS显示网站相对简单的版本，处理能力强的则显示增强的版本。所有人都能获取到网页内容。
C 、逐步完善布局。就是为不同尺寸的屏幕，借助媒体查询，编写合适的CSS：
最小宽度为20em，通常为320px，定位纵向模式的iphone、ipod touch、Android及其他移动设备。
最小宽度为30em，通常为480px，定位大一些的移动电话，及横向模式的大量320px设备。
最小宽度介于30em(480px)和47.9375em(767px)之间，适用于横向模式的手机，一些特定尺寸的平板电脑，以及比通常情况更窄的桌面浏览器。
最小宽度为48em，通常为768px，适用于常见的iPad，其他平板电脑，和台式机的浏览器。到此，所有设备基本可以满足，如果想更加的细化，完全可以自由添加！一般不会创建超过48em的媒体查询。
//20em @media only screen and (min-20em){ ……… }
//30em @media only screen and (min-30em){ ……… }
//30em~47.9375em @media only screen and (min-30em) and (max-47.9375em){ ……… }
//48em @media only screen and (min-48em){ ……… } |
下面总结一下：构建响应式Web页面的步骤
1 、创建内容和HTML。
2 、在HTML页面的head元素中输入<meta name="viewport" content="width=device-width,initial-scale=1">。
3 、创建适用于所有设备的基本样式，确保页面中的图像可伸缩
4 、针对小屏幕到大屏幕不同可视区域宽度，创建相应的媒体查询
5 、如果要为内容4中的内容指定宽度，使用百分数
6 、开始测试（推荐：Screen Sizes网站提供不同设备的分辨率等信息，Viewport Resizer工具很好使）
7 、根据需要，修改3~5步中的CSS，再次测试，直到满足不同设备的显示需求
总结：这一章讲的东西并不复杂，书中提供的解决方案也很清楚。其实最重要的东西不在这里，理论掌握好了不代表就能在实际中良好的应用。但是学习本事就是个反复迭代的过程，谁也不必妄想一下子就能学好，还是要在实践中反复强化！