标签：
随着上网设备的推陈出新和技术的快速发展，用于显示网页的环境千差万别。比如手机就有很多种的屏幕尺寸，同时，个人电脑显示器也不断在刷新分辨率的记录。传统的固定宽度（例如960像素）的网页设计已经不能满足各类移动用户浏览网页的个性需求，于是响应式网页设计孕育而生。
最早提出响应式网页设计（Responsive Web Design）的是美国的 Ethan Marcotte，他将三种已有的开发技巧（媒体和媒体查询、流式布局、弹性图片）整合起来，并给其命名。响应式网页设计是能针对任意网页设备对网页内容进行完美布局的一种显示机制，能使网页随浏览设备的不同而自行响应，动态调整布局结构和元素的规格样式，将相同的内容以不同的布局呈现给不同终端的用户。
一、媒体查询（media query）
媒体查询是响应式网页设计方法的核心。不过在细说媒体查询前，先要说一下媒体类型。
在CSS2 中存在一个非常有用的媒体类型（media type）的功能，允许定义何种媒体来展示网页。网页可以被显示在显示器、纸媒体或者听觉浏览器等。常用的媒体类型有all和screen、print等。
媒体类型的几种常见的使用方法如下：
方法一：
<link href="style.css" media="screen print" ...
方法二：
@import url("style.css") screen;
方法三：
@media screen{ selector{rules} }
媒体查询（media query）是css3 中对media type的增强，可以看成是media type + css 属性判断，可以让css更加精确作用于不同媒体或同一媒体的不同条件。下面来说一下媒体查询规则。
例如: @media all and (min-width: 800px) { ... }
一开始的“@media all”其实就是媒体类型，表示作用于所有媒体。此处也可以换成“@media screen”或者“@media print”等。“and”是关系词，之后连接的是属性条件，视口宽度最小为800像素。最后大括号里的就是css样式，用户可以在此处写在大于等于800像素时的作用样式。
此处提到了“视口”这个概念，有必要在这里解释一下其与屏幕尺寸的关系。视口和屏幕尺寸不是同一个概念。视口是指浏览器窗口内的内容区域，不包含工具栏、标签栏等。也就是网页实际显示的区域。屏幕尺寸指的是设备的物理显示区域。需要注意的是有些浏览器调整工具显示的尺寸包含浏览器的其他元素，诸如地址栏、标签栏和搜索栏，而有些工具则不是这样。
关系词 all 和 and等不是必选的。在将某个媒体查询应用于所有媒体类型时，会省略 all。后面的 and 也是可选的。可以使用简写语法重新编写媒体查询，如下
@media (min-width:800px) { ... }
如果用关系词可以实现比较复杂的媒体查询效果。例如，如果您想要创建一个仅在最小宽度为 640 像素且最大宽度为 1366 像素时应用的样式，就可以写成如下：
@media (min-width:640px) and (max-width:1366px) { ... }
如果您想要增加其他条件来检查特定的屏幕方向，只需添加另一个 and 关键词，后跟 orientation 媒体查询：
@media (min-width:640px) and (max-width:1366px) and (orientation:portrait) { ... }
媒体查询仅在宽度为 640 到 1366 像素且方向是纵向时才能激活。
关系词中也有or 。和 and 一样，这些条件组合在一起会构成复杂表达式。如果其中有一个条件为 True，那么整个表达式或分离的两个条件都会为 True。
@media (min-width:640px) or (orientation:portrait) { ... }
如果宽度至少是 640 像素或方向是纵向的，则会应用该规则。
另一个保存在词库中的媒体查询关系词是 not。位于媒体查询的开始处，not 会忽略结果。换句话说，如果该查询本来在没有 not 关键词的情况下为 true，那么现在它将为 false。
@media (not min-width:640px) { ... }
当最小宽度不是 640 像素时，会应用下列 CSS 规则。
媒体的特性有很多，但要设计响应式网站，只需要了解一些媒体特性：方向、宽度和高度。作为一个简单媒体特性，方向的值可以是 portrait 或 landscape。这些值适用于持有手机或平板电脑的用户，使您可以根据两个形状因素来优化内容。
二、流式布局
在认识到媒体查询威力无比的同时，我们也要看到它的局限性。那些仅使用媒体查询来适应不同视口的固定宽度设计，只会从一组CSS 媒体查询规则突变到另一组，两者之间没有任何平滑渐变，而且会导致规则宽度范围之外的页面需要水平滚动才能完整浏览。为了解决这个问题，我们需要使用由百分比定义网页宽度并设置样式浮动的流式布局。
流式布局的特点之一就是百分比布局。相比采用具体尺寸的布局，百分比布局在用户缩放浏览器窗口时，不会出现内容被隐藏和出现横向滚动条。Ethan Marcotte提供了一个简易的公式：目标元素宽度÷父级元素宽度 = 百分比宽度。但需要注意的是，要保证元素的相邻元素都是使用百分比定义宽度，这样就能使页面在任意尺寸的设备中以一致的布局呈现。
流式布局中，还有一种技术就是弹性盒布局。已经被现代的浏览器支持。弹性盒布局模型主要用于控制HTML元素之间的排列形式。在过去，CSS中用float控制元素的排列，人们需要通过大量的数值计算来确保元素的精确位置。弹性盒就是为了帮助开发者快速精确定位元素。比如要实现一个三列布局，中间是固定宽度，两边是自由缩放的。以前得用js配合做一些计算来不断设置两边元素的宽度来达到缩放时保持三列布局。现在用弹性盒模型的css就可以轻松实现。
三、弹性图片
要让图片自适应缩放，一般使用css将图片的宽度设置成100%，这样就能使图片在布局中保持特定的比例。但随着浏览器的缩放，当图片的实际大小超过图片本身的大小时，图片就会变的模糊。有效的解决方案，就是及时替换成一张尺寸更大的图片。这种方式也称为响应式图片。
响应式图片的思想是由Filament Group提出的，是指用户代理根据输出设备的分辨率不同加载不同类型的图片，不会造成带宽的浪费，同时，在改变输出设备类型或分辨率时，能及时加载对应类型的图片。 大致的原理是利用js脚本来检测当前设备的视口大小，根据检测结果来加载不同尺寸的图片。目前国内外已有的一些js插件，都较好的实现了这个功能，但都各有利弊，在开发时需根据实际情况选择使用。除了用js之外，还有其他的一些实现方式。
在此还要特别注意在Retina屏幕下，图片为了保持清晰，需要加载高清的图片。在css4的草案中，对background-image定义了一种新的方法，image-set，可以根据屏幕的不同像素密度比加载不同的图片，例如：
#test {
background-image: url(assets/no-image-set.png);
background-image: -webkit-image-set(url(assets/test.png) 1x,url(assets/test-hires.png) 2x);
background-image: -moz-image-set(url(assets/test.png) 1x,url(assets/test-hires.png) 2x);
background-image: -o-image-set(url(assets/test.png) 1x,url(assets/test-hires.png) 2x);
background-image: -ms-image-set(url(assets/test.png) 1x,url(assets/test-hires.png) 2x);
}
当然，也可以采用媒体查询的功能来判断不同的像素密度比，如：
/* ------------- Retina ------------- */
@media only screen and (-o-min-device-pixel-ratio: 2/1), /* Opera */
only screen and (min--moz-device-pixel-ratio: 2), /* Firefox 16 之前 */
only screen and (-webkit-min-device-pixel-ratio: 2), /* Webkit */
only screen and (min-resolution: 240dpi), /* 标准 */
only screen and (min-resolution: 2dppx) /* 标准 */
{
#test {
background-image: url(assets/test-hires.png);
}
}
与image-set解决背景图片相对应的，img 元素中的srcset属性则解决了高清屏下加载不同图片的问题。例如：
<img src="mm-width-128px.jpg" srcset="mm-width-128px.jpg 1x, mm-width-256px 2x">
但目前image-set和srcset并没有成为正式标准。支持的浏览器比较少。
说到这里，关于响应式的一些关键技术其实已经说介绍完了。关键是在于对已有的这些技术的灵活运用。其优点非常明显：在不同终端、不同分辨率下有很强的匹配性；只需一套代码，一定程度上节省了开发和维护的成本。 但是并不是所有的网站都适合用响应式布局，响应式布局也不是万能的。 响应式的缺点主要有：兼容各种设备工作量大，效率低下；代码累赘，会出现隐藏无用的元素，加载时间加长；其实这是一种折衷性质的设计解决方案，多方面因素影响而达不到最佳效果。 所以如果预算充足，且对用户体验要求高的网站，做一个真正的“手机版”网站是首选。
当然，与响应式相关的技术发展才刚刚开始，简单并强大看似矛盾，其实从发展的角度来讲并不矛盾，完美是人类不断追求的目标。比如css3还没正式发布的时候，就已经有css4的身影了。响应式的问题也会在技术的不断更迭中得到很好的解决。
标签：
原文地址：http://www.cnblogs.com/amosworker/p/4558267.html
