1.定义和使用
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
2.@media与@media screen区别
@media screen的css在打印设备里是无效的，而@media在打印设备里是有效的，如果css需要用在打印设备里，那么就用@media ，否则，就用@media screen。
不过这只是笼统的做法，其实如果把“screen”换为“print”，写为@media print，那么该css就可用到打印设备上了，但要注意，@media print声明的css只能在打印设备上有效
3.Media Queries工作方式:
在media属性里：
● screen 只是媒体类型里的一种，其中常用的有：
（1）all——用于所有设备 （2）print —— 用于打印机和打印预览 （3）screen——用于电脑屏幕，平板电脑，智能手机等。 （4）speech——应用于屏幕阅读器等发声设备
● and 被称为关键字，其他关键字还包括 not(排除某种设备)，only(限定某种设备)
● (min-width: 400px) 就是媒体特性，其被放置在一对圆括号中。完整的特性参看 相关的Media features部分
3.1 直接在link中判断设备的尺寸，然后引用不同的css文件
<link rel="stylesheet" type="text/css" href="A.css" media="screen and (min-width: 400px)">
当屏幕的宽度大于等于400px的时候，应用 A.css
<link rel="stylesheet" type="text/css" href="B.css" media="screen and (min-width: 600px) and (max-width: 800px)">
当屏幕的宽度大于600小于800px时，应用B.css
3.2 另一种方式，即是直接写在 style 标签里或css文件中
@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
body {
background: #ccc;
}
}
4.Media使用说明举例
4.1前端响应式布局最出名的框架莫过于 Bootstrap
/* 超小屏幕（手机，小于 768px） /
/ 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） /
/ 小屏幕（平板，大于等于 768px） /
@media (min-width: @screen-sm-min) { ... }
/ 中等屏幕（桌面显示器，大于等于 992px） /
@media (min-width: @screen-md-min) { ... }
/ 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }
4.2自适应代码
@media (min-width: 768px){ //>=768的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 1200){ //>=1200的设备 }
注意下顺序，如果你把@media (min-width: 768px)写在了下面那么就是错误的！因为如果是1440,由于1440>768那么你的1200就会失效。
-
划重点
用min-width时，小的放上面大的在下面，同理如果是用max-width那么就是大的在上面，小的在下面
4.3在媒体查询代码中包含 max-width 从而将 CSS 的影响限制在更小范围的屏幕大小之内
@media screen and (min-width:1200px){}
@media screen and (min-width: 960px) and (max-width: 1199px) { }
@media screen and (min-width: 768px) and (max-width: 959px) { }
@media only screen and (min-width: 480px) and (max-width: 767px){ }
@media only screen and (max-width: 479px) { }
