前不久我的同学和我讨论响应式布局与栅格式布局的关系到底是响应式布局属于栅格式布局，还是栅格式布局属于响应式布局，个人觉得是栅格式布局属于响应式布局。因为之前的响应式布局没有学多少进去，所以我就又重新学了一遍然后写了这个笔记。其实这个响应式布局的入门还挺简单的，响应式布局是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 表达式，这种表达式不仅可以对媒体类型进行匹配，也可以对媒体分辨率、色深等各种细节进行匹配，因此可以针对不同类型、不同参数细节的媒体设备提供精确的控制。

——我也不知道哪里来的暂且引用一下

说了这么多我们来看看这个响应式布局怎么写先要完成一个原生的元素样式，利用媒体查询匹配设备类型，设置一个或者多个设备属性，将需要呈现的值放入这个媒体查询当中，当该设备类型匹配到这一个或者多个设备属性时启用这个布局。media query 媒体查询的语法格式：

@media 设备类型 and (设备属性:值){

}

例如：

@media screen and (max-width: 576px){当窗口宽度不超过最大值576px时
       要改变的元素{
       新的属性1:值;
       新的属性2:值;
       ……
    }             
}

@media screen and (mix-width: 576px){ 当窗口宽度超过最小值576px时

       要改变的元素名{
       新的属性1:值;
       新的属性2:值;
       ……
    } 
}

不知道有没有人注意到这个Max和Min这个max是指不能超过最大值，min是指超过最小值。

media query语法格式中的设备类型如下：

all:适用于所有的设备类型。
aural：适用于语音和音频合成器。
braille:适用于触觉反馈设备。
embossed:适用于凸点(盲文)字符印刷设备。
handheld:适用于小型或手提设备。
print：适用于打印机
projection:适用于投影图像，如幻灯片。
screen:适用于计算机显示。
tty:适用于使用固定间距字符格的设备，如电传打字机和终端。
tv:适用于电视类设备。

media query语法格式中的设备属性如下：

注意：and (设备属性:值)部分可以出现 0~N次，可以通过使用多个and (设备属性:值)可以对多个设备特性进行匹配。另外在使用改变样式的复合属性时如果是改变其中一个属性而非全部的话，就不能在媒体查询中使用复合属性；以复合属性background为例：假设属性background的值为{url(./img/5.jpg) center no-repeat}当窗口发生变化时我只要改变图片，其他的值不需要改变，那么在这个媒体查询当中这个background不能直接使用而是使用background-image这个属性，将url这个值改变，也不是说必须使用这个子属性background-image，复合属性background也能用但是要把之前的写过的值center与no-repeat加上不然这个背景就会出现错误

文笔不好只能写成这个样子了