定义

使用 @media 查询，可以针对不同的媒体类型定义不同的样式
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面

类型

all：用于所有设备
print：用于打印机和打印预览
screen：用于电脑屏幕，平板电脑，智能手机等（重点）
speech：应用于屏幕阅读器等发声设备

媒体功能

aspect-ratio：页面可见区域宽度与高度的比率
device-aspect-ratio：屏幕可见宽度与高度的比率
max-aspect-ratio：屏幕可见宽度与高度的最大比率
min-aspect-ratio：页面可见区域宽度与高度的最小比率
max-device-aspect-ratio：屏幕可见宽度与高度的最大比率
min-device-aspect-ratio：屏幕可见宽度与高度的最小比率
grid：用来查询输出设备是否使用栅格或点阵
width：页面可见区域宽度
height：页面可见区域高度
max-height：页面最大可见区域高度
max-width：页面最大可见区域宽度
min-width：页面最小可见区域宽度
min-height：页面最小可见区域高度
device-height：屏幕可见高度
device-width：屏幕可见宽度
max-device-width：屏幕最大可见宽度
max-device-height：屏幕可见的最大高度
min-device-width：屏幕最小可见宽度
min-device-height：屏幕的最小可见高度
min-resolution：最小分辨率
max-resolution：设备的最大分辨率
resolution：定义设备的分辨率。如：96dpi, 300dpi, 118dpcm

设置

如果浏览器窗口小于500,body的背景色为红色

@media only screen and (max-width: 500px) { body { background-color: red; } }