响应式Web设计：概述
以前，为了满足移动用户的需求，需要额外建立一个专门为移动设备设计的网站。在以前这种做法还是比较流行的，但是目前已经越来越少见了。不存在可以适应所有情形的某种正确方法。每周都有新的设备投放到市场上，而毋庸置疑的是，各家公司都在设计新的设备类型。那么，构建和维护多个网站现实吗？甚至可以说，有必要吗？显然没有，我们无法去预知未来的情形。
庆幸的是，我们有办法构建一个既可以运行现在的设备，也可以运行在未来的设备上的网站。更棒的是，可以让它在较小的屏幕、较大的屏幕以及介于它们之间的屏幕上显示不同的效果。
响应式页面的组成：
Ethan Marcotte为我们提供了如何构建响应式web设计。他的方法有以下三点：
1、灵活的图像和媒体。(图像和媒体资源的尺寸是用百分比定义的，从而可以根据环境进行缩放。)
2、灵活的、基于网格的布局，也就是流式布局。(所有的width属性都用百分数设定，因此所有的布局都是相对的。其他水平属性通常也会使用相对单位em、百分数、rem等)。
3、媒体查询。(使用这项技术，可以根据媒体特征（如浏览器可视页面区域的宽度）对设计进行调整。)
创建可伸缩图像：
在默认情况下，图像显示的尺寸是HTML中指定的width和height属性值，如果不指定这些属性值，图像会自动按照其原始尺寸显示。当屏幕宽度有限的时候，按原尺寸显示图像就不一定合适了。使用可伸缩图像技术，就可以让图像在可用的空间内缩放，但不会超过其本来的宽度。
我记得我以前做的网页，其中的图像都是固定大小的，当我将浏览器窗口左右拉伸时，图像也不会改变。如下例子所示：
当我没有设置图片的宽度和高度：
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<title>网页标题</title>
</head>
<body>
<img src="timg.jpg" alt="" class="post-photo">
<img src="timg1.jpg" alt="" class="post-photo-full">
</body>
</html>
代码执行：
原图：
左右拉伸浏览器窗口后：
很明显如果不指定图像的宽度和高度，就会按照图像原本大小显示，并且不能随着有限的空间来伸缩。
制作可伸缩图像有两个步骤：
1、在HTML的img标签中省略width和height属性。
2、在样式表中，为每个想做成可伸缩图像的图像应用max-width: 100%。
注意：
1、一定要使用max-width:100%,不要使用width:100%;
(因为width:100% 是将图像尽可能地填充页面，如果图像比页面宽度小，图像就会扩大到超过原来尺寸，
可能会比较难看)
2、图标字体和SVG可以创建无损缩放图形。（不要忘记对图像进行优化，可以让文件尺寸尽可能地变小）
3、可以使用background-size属性对背景图像进行缩放（对ie8无效）
4、视频也可以同样进行缩放。
代码实例如下：
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<title>网页标题</title>
<style>
/* 创建缩放图像的样式代码 */
.post-photo,.post-photo-full{
max-width: 100%;
}
</style>
</head>
<body>
<img src="timg.jpg" alt="" class="post-photo">
<img src="timg1.jpg" alt="" class="post-photo-full">
</body>
</html>
效果截图：
这个是拉伸过的，可以看到这个图像的宽度不会超过浏览器窗口的，并且小图宽度也没有超过原本大小。
创建弹性布局网格
拥有定宽容器（盒子）的网页显得有些死板，因为他不会随着浏览器的宽度变小而变小，这样就会出现横向的滚动条。
创建弹性布局（可选）第一步：对包含整个页面内容的元素设置max-width：value。（value通常使用像素，也可以使用百分数、em值或rem值）
第二步：对需要某个宽度实现预期布局的元素，设置width：value，其中value表示元素在水平方向上占据容器空间的比例。（通常不必设置width：100%）
例如：
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<title>弹性布局网格</title>
<style>
.header,
main,
.sidebar,
.footer {
background-color: blueviolet;
margin-bottom: 0.3em;
}
.page {
/* 最大宽度为960px 可以随着容器的空间而来适应 */
max-width: 960px;
margin: 0 auto;
}
.container {
overflow: hidden;
}
main {
float: left;
/* 要求宽度/包含块宽度使用600px/960px */
width: 62.5%;
}
.sidebar {
float: right;
/* 300/960 */
width: 31.25%;
}
</style>
</head>
<body>
<div class="page">
<header class="header">
<p>page header max-width:960</p>
</header>
<div class="container">
<main role="main">
<p>main width:600px</p>
</main>
<div class="sidebar">
<p>sidebar width:300px</p>
</div>
</div>
<footer class="footer" role="contentinfo">
<p>page footer</p>
</footer>
</div>
</body>
</html>
运行后：
如上面例子所示：整个页面变得可以缩放，而且都会保持自己的比例。
注意：
1、当对font-size、margin、padding和max-width使用em值时，如果用户更改了浏览器默认字体的大小，那么页面也会跟着变大或变小。
2、用百分比时，不要忘记容纳它的容器是来自它最直接的祖先元素。
3、将box-sizing属性设置为border-box，就可以很方便的拥有水平方向内边距（使用em或其他的单位）的元素定义宽度。
小结：结合使用可伸缩图像和弹性布局，便可以让整个页面变得可以伸缩。
媒体查询
通过媒体查询，可以根据设备的媒体属性应用不同的样式。尽管媒体查询包含很多功能，但是构建响应式网页用得最多的还是min-width和max-width。
可以使用三种方式针对特定的媒体类型定位CSS。
第一种：使用link元素的media属性，位于head内。
如：
<head>
<!-- 仅支持媒体查询-->
<link rel="stylesheet" href="XXX.css" target="_blank" rel="external nofollow" media="screen" />
</head>
...
第二种：在样式表中使用@media规则。
如：
/* 只用于打印的样式 */
@media print {
header nav,
.ad{
display: none;
}
}
第三种：使用@import规则（不讨论这种方法，它会影响性能。）
媒体特性：
width(高度)
height（高度）
device-width（设备宽度）
device-height（设备高度）
orientation（方向）
aspect-ratio（高度比）
device-aspect-ratio（设备高度比）
color（颜色）
color-index（颜色数）
monochrome（单数）
resolution（分辨率）
scan（扫描）
grid（栅格）
还有一些非标准的媒体特性，如：
-webkit-device-pixel-ratio（webKit（谷歌等浏览器使用的网页引擎）设备像素比）
-moz-device-pixel-ratio（Mozilla（火狐等浏览器使用的网页引擎）设备像素比）
其中除了orientation 、scan 、grid属性外，都可以加max-和min-前缀。
（移动浏览器和桌面浏览器对媒体查询支持程度还是挺高的，但是ie8及以下版本并不支持媒体查询）
例子：
指向外部样式表的链接：(指向style-480.css ，其中的样式仅支持媒体查询并且视觉宽度不小于480px)
<link rel="stylesheet" media="only screen and (min-width:480px)" href="style-480.css" target="_blank" rel="external nofollow" />
位于样式表中的媒体查询：
...
/* 前面的样式 所有设备都可以获取*/
/* 后面的样式 仅支持媒体查询且最小视觉宽度为480px */
@media only screen and (min-width:480px){
p{
color:red;
font-weight:bold;
}
}
上述的两种方式的例子进行演示如下：
当宽度小于480px时，就不会应用此媒体查询的样式表，当宽度大于等于480px时，就会应用此媒体样式表。
注意：
媒体查询的width特性对应的视觉区域的宽度，而device-width对应的是屏幕的宽度。
在移动设备中，默认情况下这两个值是不一样的，比如：Mobile Safari（iPhone的浏览器）的视觉区域是980px，而iPhone屏幕只有320px，因此在显示的时候，会将其网页缩小以适应的320px的屏幕宽度，于是就导致了网页只占据屏幕约三分之一的大小区域。
所以，在页面的head部分必须添加视觉区域meta元素
如：<meta name="viewport" content="width=device-width , initial-scale=1" />
有了这条语句，页面的视觉宽度和设备的屏幕宽度相等。即使设备的屏幕宽度在改变或者将设备纵向，页面还是会填充整个设备屏幕。如果没有这条语句，媒体查询中的一些属性可能得不到预期的效果。
initial-scale=1这个是将页面默认缩放级别设置成100%，防止部分对width和device-width值没有影响。
构建响应式网站
结合上面的可伸缩图像、弹性布局和媒体查询，将它们组合在一起，就可以构建出响应式网页。
在这中间应该注意的问题有：
1、遵循移动优先为页面设计样式。
（1）首先为所有的设备提供基准样式。（包括基本的文本样式、内边距、边框、外边距和背景，以及可伸缩图像，避免让元素浮动、或者对容器设定宽度，因为最小屏幕不够宽。）
（2）开始使用媒体查询，逐渐为更大的屏幕定义样式（使用最多的min-width、max-width）。
（3）用媒体查询为每页中的每个断点定义样式。
例如：
@media only screen and (min-width:20em) {
/*大于等于320px 样式*/
}
@media only screen and (min-width:30em) {
/* 大于等于480px */
}
@media only screen and (min-width:30em) and (max-width:47.9375em){
/* 480-767px之间 */
}
@media only screen and (min-width:48em) {
/*大于等于768px*/
}
兼容旧版IE
对于IE8以及更早的版本，有三种解决办法：
1、什么都不做，就让网站显示基本的样式。
2、为他们单独创建一个样式表，让他们显示最宽的版本。（复制一份样式表，将其中的媒体查询语句给去掉，在HTML中添加条件注释，从而让不同的浏览器都可以找到正确的样式表）
例如：
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="css/style.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" />
<!--<![endif]-->
<!--[if lt IE 9]>
<link rel="stylesheet" href="css/old-ie.css" target="_blank" rel="external nofollow" />
<![endif]-->
3、如果希望页面有响应式的效果，就在页面中引入respond.min.js。(Scott Jehl 创建的这段代码，它让min-width和max-width媒体查询对旧版IE也有效果)此文件下载地址：https://github.com/scottjehl/Respond 。
引入媒体查询的样式表和引入respond.js文件
<link rel="stylesheet" href="css/style.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" />
<!--[if lt IE 9]>
<script src="js/respond.min.js"><script>
<![endif]-->
总结：IE旧版本的兼容使用第二种方法更合适，他可以让IE8用户也能看到网站的完整布局。还有任何设备都会应用基准样式表（也就是位于媒体查询以外的样式表），使用媒体查询可以覆盖这些样式。