媒体查询( Media Query )是CSS3新语法
使用@media查询，可以针对不同的媒体类型定义不同的样式
@media 可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中，页面也会根据浏览的宽度和高度重新渲染页面
目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询
注意点：
用 @media开头。注意@符号mediatype媒体类型
关键字and not only
media feature 媒体特性必须有小括号包含
1.mediatype查询类型
将不同的终端设备划分成不同的类型，称为媒体类型
| 值 | 解释说明 |
|---|---|
| all | 用于所有设备 |
| 用于打印机和打印预览 | |
| screen | 用于电脑屏幕，平板电脑，智能手机等 |
语法：
@media mediatype and/not/only (media feature) {
csS-Code;
}
2.关键字
关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件
and:可以将多个媒体特性连接到一起，相当于“且”的意思
not:排除某个媒体类型，相当于“非”的意思，可以省略。
only: 指定某个特定的媒体类型，可以省略
3.媒体特性
每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性
设置不同的展示风格。我们暂且了解三个注意他们要加小括号包含
| 值 | 解释说明 |
|---|---|
| width | 定义输出设备中页面可见区域的宽度 |
| min-width | 定义输出设备中页面最小可见区域宽度 |
| max-width | 定义输出设备中页面最大可见区域宽度 |
需求：在屏幕宽度是300px至499px之间，背景是红色，500px以上是黄色。
<style>
/* 小的不会被彻底覆盖，大的却会 */
@media screen and (min-width: 300px){
body{
background-color: red;
}
}
@media screen and (min-width:500px){
body{
background-color: yellow;
}
}
</style>
</head>
<body>
</body>
