20.media媒体查询

media标签写法：

@media 设备名 only/not/and (选取条件)
{
    CSS样式
}

@media (选取条件)
{
    CSS样式
}

only：省略某种设备

not：排除某种设备

and：逻辑与

---

设备名：

参数	说明
all	所有设备
braille	盲文
embossed	盲文打印
handheld	手持设备
print	文档打印或打印预览模式
projection	项目演示，比如幻灯片
screen	彩色电脑屏幕
speech	演讲
tty	固定间距字符网格的媒体，比如电传打印机
tv	电视

 媒体查询属性 (选取条件)：

属性	说明
width	定义输出设备中的页面可见区域宽度
height	定义输出设备中的页面可见区域高度
device-width	定义输出设备中的屏幕可见宽度
device-height	定义输出设备中的屏幕可见高度
orientation	定义‘height’是否大于或等于‘width’。值portrait代表是，landscape代表否。
aspect-ratio	定义‘width’与‘height’的比率
device-aspect-ratio	定义‘device-width’与‘device-height’的比率
color	定义每一组输出设备的彩色元件个数。如果不是彩色设备，则值等于0
color-index	定义在输出设备的彩色查询表中的伸缩项目数。如果没有使用彩色查询表，则值等于0
monochrome	定义在一个单色框架缓冲区中每像素包含的单色元件个数。如果不是单色元件，则值等于0
resolution	定义设备的分辨率
scan	定义电视类设备的扫描工序
grid	用来查询输出设备是否使用栅格或点阵。只有1和0才是有效值，1代表是，0代表否
max-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最大比率。
max-color	定义输出设备每一组彩色原件的最大个数。
max-color-index	定义在输出设备的彩色查询表中的最大条目数。
max-device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最大比率。
max-device-height	定义输出设备的屏幕可见的最大高度。
max-device-width	定义输出设备的屏幕最大可见宽度。
max-height	定义输出设备中的页面最大可见区域高度。
max-monochrome	定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
max-resolution	定义设备的最大分辨率。
max-width	定义输出设备中的页面最大可见区域宽度。
min-aspect-ratio	定义输出设备中的页面可见区域宽度与高度的最小比率。
min-color	定义输出设备每一组彩色原件的最小个数。
min-color-index	定义在输出设备的彩色查询表中的最小条目数。
min-device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最小比率。
min-device-width	定义输出设备的屏幕最小可见宽度。
min-device-height	定义输出设备的屏幕的最小可见高度。
min-height	定义输出设备中的页面最小可见区域高度。
min-monochrome	定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
min-resolution	定义设备的最小分辨率。
min-width	定义输出设备中的页面最小可见区域宽度。

---

实操：

代码部分是一个简单的管理系统头部

主题div Class为：header

标题div Class为：nav

标题中含有ul标签和六个li标签

 在css部分给设备最大宽度为375px的设备增加一个背景颜色的样式：

 可以看到设备在宽度为378px时并没有显示该样式

 满足条件后则会显示样式

---

可以根据不同的长宽比来对电脑、手机等不同的设备进行优化调整，来满足各种情况下的需求。