都知道bootstrap响应式布局很酷，但是是怎么实现的呢？其官网首页有提到这一切的功劳都是来自于CSS 媒体查询（Media Query）。
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
一、media的几种引用方式
1、直接在head中引用
这也是我们很常见的引用方式，只不过很多时候我们都不太懂是什么意思。感觉又好像没有起太大作用的样子，就容易被我们忽视。
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
这里的描述的意思是：只有当当前设备是电脑屏幕，平板电脑，智能手机等才引入这个css样式文件
2、用import引入样式
但是要在style下面才能引入，
<style type="text/css" media="screen"> 或者写成<style type="text/css" media="screen and (max- 600px)">
@import url("css/style.css");
</style>
这里描述的意思是：只有当当前设备是电脑屏幕，平板电脑，智能手机并且宽度小于等于600px的时候才引入这个css样式文件
3、直接在代码中写@media
bootstrap用的就是这种方法
@media print and (max- 600px) {
选择器 {
属性：属性值；
}
}
这里描述的意思是：只有当当前设备是打印机并且宽度小于或等于600px时候才引入这个样式文件
这里可能会疑问为啥max-width：600px 还表示小于600px呢？
因为这里是指要满足媒体类型（media type）和媒体特征（media feature）这两个条件才触发里面的代码，小于600px就是指最大没超过600px；
而满足的这两个条件并且和 and|not|only 这三关键字共同发生作用的过程叫媒体查询（media query）
二、media的语法、媒体类型和媒体特征以及关键的解释
1、media的语法
针对不同的媒体使用css样式，例如只是控制个颜色、宽度等
@media media type and|not|only (media feature) {
CSS-Code;
}
针对不同媒体引用不同的css样式文件
<link rel="stylesheet" media="media type and|not|only (media feature)" href="mystylesheet.css">
2、媒体类型
媒体类型就是media tyep，通常的值有:
| 值 | 描述 |
|---|---|
| all | 用于所有设备 |
| 用于打印机和打印预览 | |
| screen | 用于电脑屏幕，平板电脑，智能手机等。 |
| speech | 应用于屏幕阅读器等发声设备 |
3、媒体特征
媒体特征就是media feature，通常的值有:
| 值 | 描述 |
|---|---|
| aspect-ratio | 定义输出设备中的页面可见区域宽度与高度的比率 |
| color | 定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0 |
| color-index | 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0 |
| max-color | 定义输出设备每一组彩色原件的最大个数。 |
| min-color | 定义输出设备每一组彩色原件的最小个数。 |
| max-color-index | 定义在输出设备的彩色查询表中的最大条目数。 |
| min-color-index | 定义在输出设备的彩色查询表中的最小条目数。 |
| device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的比率。 |
| min-device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最小比率。 |
| max-device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最大比率。 |
| device-height | 定义输出设备的屏幕可见高度。 |
| device-width | 定义输出设备的屏幕可见宽度。 |
| grid | 用来查询输出设备是否使用栅格或点阵。 |
| height | 定义输出设备中的页面可见区域高度。 |
| max-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最大比率。 |
| max-device-height | 定义输出设备的屏幕可见的最大高度。 |
| max-device-width | 定义输出设备的屏幕最大可见宽度。 |
| min-device-width | 定义输出设备的屏幕最小可见宽度。 |
| min-device-height | 定义输出设备的屏幕的最小可见高度。 |
| max-monochrome | 定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。 |
| max-resolution | 定义设备的最大分辨率。 |
| min-aspect-ratio | 定义输出设备中的页面可见区域宽度与高度的最小比率。 |
| max-height | 定义输出设备中的页面最大可见区域高度。 |
| max-width | 定义输出设备中的页面最大可见区域宽度。 |
| min-height | 定义输出设备中的页面最小可见区域高度。 |
| min-width | 定义输出设备中的页面最小可见区域宽度。 |
| min-monochrome | 定义在一个单色框架缓冲区中每像素包含的最小单色原件个数 |
| min-resolution | 定义设备的最小分辨率。 |
| monochrome | 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0 |
| orientation | 定义输出设备中的页面可见区域高度是否大于或等于宽度。 |
| resolution | 定义设备的分辨率。如：96dpi,300dpi,118dpcm |
| scan | 定义电视类设备的扫描工序。 |
| width | 定义输出设备中的页面可见区域宽度。 |
4、解释三个关键字
解释
and关键字相当于&&
not正好是取反
only表示不支持媒体特征(Media feature)但又支持媒体类型(Media Type)的设备
实例
not关键字实例：
<link rel="stylesheet" media="not print and (max- 1200px)" href="print.css" type="text/css" />
not关键字是用来排除某种制定的媒体类型，换句话来说就是用于排除符合表达式的设备。
only关键字实例
<link rel="stylesheet" media="only screen and (max-device-240px)" href="android240.css" type="text/css" />
only用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。
其主要有：支持媒体特性（Media Queries）的设备，正常调用样式，此时就当only不存在；对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备，这样就会不读了样式，因为其先读only而不是screen；另外不支持Media Qqueries的浏览器，不论是否支持only，样式都不会被采用。
三、其他附加知识
在Media Query中如果没有明确指定Media Type，那么其默认为all，如：
<link rel="stylesheet" media="(min- 701px) and (max- 900px)" href="medium.css" type="text/css">
另外还有使用逗号（，）被用来表示并列或者表示或，如下
<link rel="stylesheet" type="text/css" href="style.css" media="screen and (max-480px), screen and (min-960px)" />