菜鸟笔记——响应式布局

前不久我的同学和我讨论响应式布局与栅格式布局的关系到底是响应式布局属于栅格式布局，还是栅格式布局属于响应式布局，个人觉得是栅格式布局属于响应式布局。因为之前的响应式布局没有学多少进去，所以我就又重新学了一遍然后写了这个笔记。其实这个响应式布局的入门还挺简单的，响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。——百度百科

个人认为（以浏览器为例）响应式布局它是利用媒体查询检测浏览器的窗口大小，随着浏览器的窗口大小改变元素的属性，从而是使一个网站可以兼容多个浏览器。

响应式布局包含的三个重要方面：

1、媒体查询：是一种CSS语法。可以根据浏览器的特性，

一般是屏幕或浏览器容器宽度提供CSS规则。

2、流式布局：是使用em或者百分比等相对单位设定页面总体高度，

让布局能够随屏幕大小而缩放。要使用像素值也行。

3、弹性图片：是使用相对单位确保图片再大也不会超过容器。

media
query 媒体查询：很多时候，前期使用HTML+CSS设计的样式非常精美，但可能由于对方的设备、浏览器的原因，比如说分辨率达不到要求，色深达不到要求，最后导致用户浏览页面时的显示效果非常丑陋，为了解决这个问题，从CSS2.1开始就定义了各种媒体类型(如显示器、便携设备、电视机等)，允许设计者针对不同的媒体设备定义不同的CSS样式。CSS3强化了CSS2.1的媒体类型支持，增加了media query功能，这种机制允许设计者在css样式中添加media query 表达式，这种表达式不仅可以对媒体类型进行匹配，