媒体查询，英文全称为Media Query，是为了让一个页面是适配于不同的终端，为了适配不同的屏幕尺寸等，我们需要根据不同尺寸大小来书写相应的css规则，这就可以用到了我们的媒体查询
1.常见的媒体类型
早在css2的时代，就已经出现了screen（屏幕），all（全部），print（页面打印或打印预览模式）等媒体类型，然而媒体类型远不止这些。W3C中列出了以下10种，如下表所示。
| 值 | 设备类型 |
|---|---|
| All | 所有设备 |
| Braille | 盲人用点字法触觉回馈设备 |
| Embossed | 盲文打印机 |
| Handheld | 便携设备 |
| 打印用纸或打印预览视图 | |
| Projection | 各种投影设备 |
| Screen | 电脑显示器 |
| Speech | 语音或音频合成器 |
| Tv | 电视机类型设备 |
| Tty | 使用固定密度字母栅格的媒介,比如电传打字机和终端 |
| 虽然上面列出了很多，但我们常用依然是all，screen，print这三种 |
2.媒体类型的引用方法
- link引入
<link rel="stylesheet" href="index.css" media="screen"/>
<link rel="stylesheet" href="print.css" media="print"/>
- xml引入
<?xml-stylesheet rel="stylesheet" media="screen" href="style.css" ?>
- @import 引入
// 在样式文件中引入媒体类型:
import url( './index.css ' ) screen
// 在style标签中引入媒体类型:
<style>
eimport url( './index.css') screen</style>
- @meida引入
// @media 媒体类型 判断条件
@media screen and (min-width:600px) { // 最小宽度，页面大于600px触发
// 具体样式
}}
3.常见的媒体特性
- 最大最小宽度
@media screen and (mix-width:600px) {
// 具体样式
}
@media screen and (max-width) {
}
- 多个媒体特性混合使用 需要使用多个媒体特性时，用and关键字将媒体特性结合在一起
// 在智能设备上，使用min-device-width,max-device-height等设置媒体特性
@media print and (mix-device-width:600px) and (max-width:1000px) {}
- not关键字 使用not关键字，可以运用到除列举出的所有其他媒体特性
// 该特性被用于除了打印机设备和屏幕大于800像素的其他所有设备
@media not print and (min-width:800px) {}
