媒体查询
媒体查询英文全称 Media Query，顾名思义就是查询用户所使用的媒体或者媒介。这里的媒体指的是用户所使用的终端
到目前为止，网页的浏览终端是越来越多了，用户可以通过不同的终端来浏览网页，比如：电脑、平板电脑、手机、电视等。尽管我们无法保证一个网站在不同屏幕尺寸和不同设备上看起来一模一样，但是至少要让我们的Web页面能适配用户的终端。
然而在 CSS3 中的 Media Query （媒体查询）模块就是用来让一个页面适应不同的终端样式。
Media Type 媒体类型
首先我们来认识一下 CSS 中所支持的媒体类型。其实在 CSS2 中常碰到的就是 all（全部）、screen（屏幕）和 print（页面打印或打印预览模式）。然而媒体的类型其实远不止这 3 种。
在 W3C 中共列出了 10 种媒体类型，如下表所示：
虽然上面列出来了这么多，但是常用的也就是 all（全部）、screen（屏幕）和 print（页面打印或打印预览模式）这三种媒体类型。
媒体类型引用方法
引用媒体类型的方法有很多，常见的媒体类型引用方法有：link标签，xml方式，@import，@media
link标签
link标签引入媒体类型其实就是在link标签引用样式的时候，通过link标签中的media属性来指定不同的媒体类型，比如：
<link rel="stylesheet" href="index.css" media="screen"> <link rel="stylesheet" href="demo.css" media="print">xml方式
xml方式和link方式比较相似，也是通过media属性来指定，如下：
<? xml-stylesheet rel="stylesheet" media="screen" href="index.css" ?>- @import
@import引入媒体类型主要方式有两种，一种是在CSS文件中通过@import引入另一个样式文件，另一种是在style标签中引入
👉 需要注意的是 IE6 和 IE7不支持这种方式
🌰举个栗子：
在样式文件中引入媒体类型：
@import url('./index.css') screen;在style标签中引入媒体类型:
<style>
@import url('./index.css') screen;
</style>- @meida 方式
@media是CSS3中新引进的一个特性，叫媒体查询。@media引入媒体同样也有两种方式，如下：
在样式文件中引入媒体类型：
@media screen {
/*具体样式*/
}在style标签中引入媒体类型:
<style>
@media screen {
/*具体样式*/
}
</style>虽然上面介绍了 4 种引入方式，但是最常见的就是第 1 种和第 4 种。
媒体查询具体语法
这里我们可以将媒体查询看成一个公式
Media Type(判断条件) + CSS(符合条件的样式规则)
🌰举个栗子：
- link的方式
//表示当媒体类型是 screen 并且 屏幕最大的宽度是600px的时候，引入style.css样式
<link rel="stylesheet" media="screen and (min-width:600px)" href="style.css" />- @media的方式
@meida screen and (min-width:600px){
/* 具体样式 */
}上面的两个例子中都是使用 width 来进行的样式判断，但是实际上还有很多特性都可以被用来当作样式判断的条件。
具体如下表：详情可点击这里
有了 Media Query，我们能在不同的条件下使用不同的样式，使页面在不同的终端设备下达到不同的渲染效果。
这里还有个公式：
@meida 媒体类型 and (媒体特性){
/* 具体样式 */
}🌰举个栗子：
- 最大宽度 max-width
该媒体特性是指媒体类型小于或等于指定宽度时，样式生效，例如：
/*当屏幕宽度小于750px的时候样式生效*/
@meida screen and (max-width:750px){
/* 具体样式 */
}- 最小宽度 min-width
该媒体特性是指媒体类型大于或等于指定宽度时，样式生效，例如：
/*当屏幕宽度大于750px的时候样式生效*/
@meida screen and (min-width:750px){
/* 具体样式 */
}- 多个媒体特性混合使用
当需要多个媒体特性时，可以使用 and关键字将媒体特性结合在一起，例如：
/*当屏幕宽度大于等于400px并且小于等于750px的时候样式生效*/
@meida screen and (min-width:400px) and (max-width:750px) {
/* 具体样式 */
}- not 关键字
not关键字可以用来排除某种媒体特性，例如：
/*样式代码将生效于除了打印设备并且屏幕宽度大于等于400px时生效*/
@meida not print and (min-width:400px) {
/* 具体样式 */
}👉 需要注意的是 如果未指明媒体设备，那么默认为all，就是应用于所有设备
