问题引入

在上一节我们知道了，以后开发只要在html里设置字体大小，其他样式的所有单位都可以用rem来代替，是非常好的开发模式。
但是！！！我们如何根据不同的设备（屏幕大小）动态地修改html的字体大小呢？这就需要本节内容—-媒体查询。

1. 什么是媒体查询？

image.png
可以针对不同的屏幕尺寸设置不同的样式，一针见血，直接解决问题，杀死了比赛！
所以媒体查询可以看作是 响应式布局的 基础！

2. 语法规范

image.png

2.1 mediatype 媒体类型

主要了解三种
image.png
媒体类型表示我们希望在哪种设备上运行代码，比如scree就是在计算机上。

其他媒体类型：

媒体类型 版本 兼容性 描述
aural CSS2不推荐使用 Opera 用于语音和音乐合成器
braille CSS2 Opera 用于触觉反馈设备
handheld CSS2 Chrome,Safari,Opera 用于小型或手持设备
print CSS2 所有浏览器 用于打印机
projection CSS2 Opera 用于投影图像，如幻灯片
screen CSS2 所有浏览器 用于计算机显示器
tty CSS2 Opera 用于使用固定间距字符格的设备。如电传打字机和终端
tv CSS2 Opera 用于电视类设备
embossed CSS2 Opera 用于凸点字符（盲文）印刷设备
speech CSS2 Opera 用于语音类型
all CSS2 所有浏览器 用于所有媒体设备类型

2.2 连接关键字

image.png
关键字主要功能就是连接媒体类型和媒体特性的关键词，可以是并且，非或者只要。

2.3 媒体特性media feature

image.png
其他媒体特性：

媒体特性 取值 接受min/max 描述
width yes 定义输出设备中的页面可见区域宽度
height yes 定义输出设备中的页面可见区域高度
device-width yes 定义输出设备的屏幕可见宽度
device-height yes 定义输出设备的屏幕可见高度
orientation portrait | landscape no 定义’height’是否大于或等于’width’。值portrait代表是，landscape代表否
aspect-ratio yes 定义’width’与’height’的比率
device-aspect-ratio yes 定义’device-width’与’device-height’的比率。如常见的显示器比率：4/3, 16/9, 16/10
color yes 定义每一组输出设备的彩色原件个数。如果不是彩色设备，则值等于0
color-index yes 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0
monochrome yes 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0
resolution yes 定义设备的分辨率。如：96dpi, 300dpi, 118dpcm
scan progressive | interlace no 定义电视类设备的扫描工序
grid no 用来查询输出设备是否使用栅格或点阵。只有1和0才是有效值，1代表是，0代表否

3.媒体查询的使用/本质

知道了三个参数就可以写一个媒体查询了，媒体查询的本质是一个筛选条件，即只有满足媒体查询的条件时，其内部设置的样式才会生效。

实例：

  1. /* 这句话的意思就是，只有当屏幕的宽度小于等于800px的时候，body才会有背景颜色 */
  2. @media screen and (max-width:800px){
  3.   body {
  4.     backgroud-color: pink
  5.   }
  6. }

所以上例中，当浏览器的宽度大于最大宽度800时，body的样式失效，反之生效。
所以媒体查询的本质其实就是一个 if 判断的语法。

注意点

screen和and必须写
and也可以连接多个媒体特性，比如： @media screen and (min-width:100px) and (max-width:200px)