标签：
响应式布局定义：将弹性网格布局、弹性图片、媒体和媒体查询整合起来，即为响应式布局。
一、媒体查询：支持不同的窗口
基本语法：
@media screen and (max-width:960px){ body{ background-color:red; } }
使用@inport指令可以在当前样式表中按条件引入其他样式表。如下例：
@inport url("phone.css") screen and (max-width:768px);
但是需要注意的是使用@inport方式会增加HTTP请求
媒体查询能够检测的性能有：
width:视口宽度
height:视口高度
device-width:设备屏幕宽度
device-height:设备屏幕高度
orientation:检测设备处于横向还是纵向
aspect-ratio:基于视口宽高比，一个16:9显示的屏可这样定义，aspect-ratio:16/9
device-aspect-ratio:基于设备屏幕宽高比
color:颜色位数，min-color:16，会检测设备是否拥有16位颜色
color-index:设备颜色索引表中的颜色数，必须为非负整数
monochrome:检测单色帧缓冲区中每像素使用位数，必须非负整数
resolution:检测屏幕或打印机分辨率
scan:电视机的扫描方式，值可为，progresssive（逐行扫描），interlace（隔行扫描）
grid:检测输出设备是网络设备还是位图设备
注：上述特性，除scan和grid外，可用min和max创建查询范围。
二、使用流式布局
目标元素宽度 / 上下文元素宽度 = 百分比宽度
在响应式布局中，要放弃使用px，使用em。
IE无法调整使用px作为单位的字体的大小。
em的特点：
1、em的值并不是固定的。
2、em会继承父级元素的字体大小。
rem，也是相对单位：
是相对于HTML的根元素，而不是父元素。
弹性图片：
可以给图片都加上属性,即为图片设置阈值：
img{max-width:100%;} 或 img{max-width:220px;}
max-width属性：
可以给元素加上max-width属性，以限制该元素的最大宽度。
viewport特性，是一个移动专属的Meta值，用于定义视口的各种行为。
layout viewport：布局视口
在iOS Safari中定义了一个viewport meta标签，用来创建一个虚拟的布局视口，这个视口的分辨率接近PC。
visual viewport：视觉视口
手持设备物理屏幕的可视区域，即视觉视口。
ideal viewport：完美视口
完美视口。不用缩放或拖动网页就能很好的进行网页浏览。
viewport特性：
width：
width被用来定义layout viewport的宽度，如果不指定该属性（或者移除viewport meta标签），则layout viewport宽度为厂商默认值。
<meta name="viewport" content="width=device-width" />
此时的layout viewport将成为ideal viewport，因为layout viewport宽度与设备视觉视口宽度一致了。
height：
与width类似，但实际上却不常用，因为没有太多的use case。
initial-scale：
如果想页面默认以某个比例放大或者缩小然后呈现给用户，那么可以通过定义initial-scale来完成。
initial-scale用于指定页面的初始缩放比例，假定你这样定义：
<meta name="viewport" content="initial-scale=2" />
那么用户将会看到2倍大小的页面内容。
<meta name="viewport" content="initial-scale=1" />
如上initial-scale也能实现ideal viewport。
maximum-scale：
在移动端，你可能会考虑用户浏览不便，然后给予用户放大页面的权利，但同时又希望是在一定范围内的放大，这时就可以使用maximum-scale来进行约束。
maximum-scale用于指定用户能够放大的比例。
<meta name="viewport" content="initial-scale=1,maximum-scale=5" />
假设页面的默认缩放值initial-scale是1，那么用户最终能够将页面放大到这个初始页面大小的5倍。
minimum-scale：
类似maximum-scale的描述，不过minimum-scale是用来指定页面缩小比例的。通常情况下，为了有更好地体验，不会定义该属性的值比1更小，因为那样页面将变得难以阅读。
user-scalable：
如果你不想页面被放大或者缩小，通过定义user-scalable来约束用户是否可以通过手势对页面进行缩放即可。
该属性的默认值为yes，即可被缩放（如果使用默认值，该属性可以不定义）；当然，如果你的应用不打算让用户拥有缩放权限，可以将该值设置为no。
使用方法如下：
<meta name="viewport" content="user-scalable=no" />
标签：
原文地址：http://www.cnblogs.com/suvllian/p/5724262.html
