1. 响应式布局
响应式布局是2015年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。其目的是为用户提欧共更加舒适的界面和更好的用户体验。
2.优缺点
优点：
1) 面对不同分辨率设备灵活性强
2）能够快捷解决多设备显示适应问题
缺点：
1）兼容各种设备工作量大，效率低下
2）代码累赘，会出现隐藏无用的元素，加载时间长。
3 语法
CSS3 media queries的语法如下，
@media only screen and (max/min-width/height: 960px) { /* 样式定义 */ }
其中 “only screen” 参数表示限定当访问环境（媒体类型）为彩色屏幕设备时才生效。该参数可选值为 all | aural | braille | handheld | print | projection | screen | tty | tv | embossed除非该参数数值为all，否则可以在前面加个only限定类型。对于移动端和PC端，我们只需设为 "screen" 或 "only screen" 即可，建议使用后者，其语义更为严谨。
另一个参数 “max/min - width/height” 表示当屏幕的宽度/高度超过或者小于某个值时则生效，具体可以看下面的示例：
1）Max Width
@media only screen and (max-500px){ .outDiv { margin: 0 auto; 85%; height: 50%; background: red; } }
该代码段表示只有当屏幕宽度小于500px时才生效。
2） Min Width
@media only screen and (min-500px){ .outDiv { margin: 0 auto; 85%; height: 50%; background: red; } }
该代码段表示只有当屏幕宽度大于500px时才生效。
3） Max/Min Height
同 max/min-width ，表示当屏幕高度小于/大于设定值时样式才生效。
4） Multiple Media Queries
如果需要定义样式是在某个分辨率区间（比如500px-900px）才生效，就可以叠加使用 max/min-width/height 。
@media only screen and (mix-500px) and (max-900px){ .outDiv { margin: 0 auto; 85%; height: 50%; background: red; } }
4 例子
1）PC端响应式布局例子参考bootstrap学习总结-02 网格布局
2）移动端响应式布局例子
<!doctype html><!--声明当前文档为html文档--> <html lang="en"> <head><!--头部--> <meta charset="UTF-8"><!--字符编码：utf-8国际编码 gb2312中文编码--> <meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale = 1.0,minimum-scale = 1.0,maximum-scale=1.0"> <title>Document</title> <style> *{margin:0px;padding:0px;} @media all and (orientation:portrait){ #box{300px;height:500px;background:red;} } @media all and (orientation:landscape){ #box{300px;height:200px;background:blue;} } </style> </head> <body> <div id="box"></div> </body> </html>
尝试使用手机浏览器打开此页面，当旋转手机时可以看到效果。