@media 规则用于通过使用媒体查询为不同的媒体/设备应用一组不同的样式。媒体查询主要用于检查设备的高度、宽度、分辨率和方向(纵向/横向)。此 CSS 规则是通过为特定屏幕类型或设备(例如手机、PC)提供更优化的设计，从而使响应式设计发挥更大作用的出路。媒体查询也可用于为打印文档或屏幕阅读器指定某些样式。
句法：
@media not|only mediatype and (media feature and|or|not mediafeature)
{
// CSS Property
}
使用的关键词：
- not：它还原整个媒体查询。
- only：它阻止旧浏览器(不受支持的浏览器)应用指定的样式。
- and：用于组合两种媒体类型或媒体特征。
媒体类型：
- all：这是默认的媒体类型。它用于所有媒体类型设备。
- 打印：用于打印机设备。
- 屏幕：用于电脑屏幕、手机屏幕等。
- 语音：用于读取页面的屏幕阅读器。
媒体功能：媒体查询中有许多媒体功能，其中一些如下所列：
- any-hover：任何可用的输入机制都允许用户将鼠标悬停在任何元素上。
- any-pointer：它定义了任何可用的输入机制是指点设备，如果是这样，它的准确度如何?
- any-ratio：用于设置视口的宽高比。
- color：用于设置输出设备的颜色分量。
- 色域：用于设置用户代理或输出设备支持的颜色范围。
- color-index：用于设置设备可以显示的颜色数量。
- grid：它定义了设备是网格还是引导图的天气。
- height：用于设置视口的高度。
- 悬停：它允许用户悬停在任何元素上。
- 反转颜色：这个定义任何设备反转颜色
- light-level：它定义了光照水平。
- max-aspect-ratio：用于设置最大宽高比。
- max-color：用于设置输出设备每个颜色分量的最大位数。
- 最大颜色索引；它用于设置设备可以显示的最大颜色数。
- max-height：设置浏览器显示区域的最大高度。
- max-monochrome：用于设置单色设备上每种“颜色”的最大位数。
- max-resolution：用于设置输出设备的最大分辨率。
- max-width：设置浏览器显示区域的最大宽度。
- min-aspect-ratio：用于设置最小宽高比。
- min-color：用于设置输出设备每个颜色分量的最小位数。
- 最小颜色索引；它用于设置设备可以显示的最小颜色数。
- min-height：设置浏览器显示区域的最小高度。
- max-monochrome：用于设置单色设备上每种“颜色”的最大位数。
- min-resolution：用于设置输出设备的最小分辨率。
- min-width：设置浏览器显示区域的最小宽度。
- 单色：用于设置单色设备上每种“颜色”的位数。
- 方向：用于设置视口的方向为横向或纵向。
- overflow-block：用于控制内容溢出视口的情况。
- overflow-inline：用于控制内容溢出视口沿内联轴滚动的情况。
- 指针：它是指点设备的主要输入机制。
- 分辨率：它使用 dpi 或 dpcm 设置设备的分辨率。
- scan：对输出设备进行扫描处理。
- 脚本：是否有像 JS 一样可用的脚本。
- update：用于快速更新更新输出设备。
- width：用于设置视口的宽度。
例子：
CSS @media rule
GeeksforGeeks
CSS @media rule
GeeksforGeeks: A computer science portal
输出：
当屏幕宽度超过 600px 时： 
当屏幕宽度小于 600px 时： 
支持的浏览器： @media 规则支持的浏览器如下：
- 谷歌浏览器 21.0
- 浏览器 9.0
- 火狐 3.5
- 歌剧9
- Safari 4.0