css3(7):Media Query(2016/02/15更新)
这篇blog部分参考了CSS3 Media Query实现响应布局这个文章，你也可以直接去看他，忽略下面的文字。
一、什么是响应式布局？
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
二、响应式布局有哪些优点和缺点？
优点：1.面对不同分辨率设备灵活性强；2.能够快捷解决多设备显示适应问题
缺点：1.兼容各种设备工作量大，效率低下；2.代码累赘，会出现隐藏无用的元素，加载时间加长；3.其实这是一种折衷性质的设计解决方案，多方面因素影响而达不到最佳效果；4.一定程度上改变了网站原有的布局结构，会出现用户混淆的情况
三、使用方式？
1.提前指定窗口宽度 <meta name="viewport" content="width=device-width, initial-scale=1">
2. @media 设备类型 and （设备特性）{ 样式代码 }
/*除了and 还有 not 、only等逻辑*/
@media screen and (max-width: 639px){
/*样式代码*/
}
注意：media query是包括边界的，比如 max-width：768，是包括768的