CSS @media规则

定义和用法

@media规则用于媒体查询，以便为不同的媒体类型/设备应用不同的样式。

媒体查询可用于检查许多内容，例如：

视口的宽度和高度
设备的宽度和高度
方向（横向或纵向模式下的平板电脑/手机？）
分辨率

使用媒体查询是一种流行的技术，可以为台式机，笔记本电脑，平板电脑和移动电话提供量身定制的样式表（响应式网页设计）。

您还可以使用媒体查询指定某些样式仅适用于打印文档或屏幕阅读器（媒体类型：打印，屏幕或语音）。

除媒体类型外，还有媒体功能。媒体功能通过允许测试用户代理或显示设备的特定功能，为媒体查询提供更具体的详细信息。例如，您可以仅将样式应用于比特定宽度更大或更小的屏幕。

浏览器支持

表中的数字指定了完全支持该属性的第一个浏览器版本。数字后跟-ms-， -webkit-，-moz-或-o-指定使用前缀的第一个版本。

属性	IE/Edge	Chrome	FireFox	Safari	Opera
属性名称
@media	9.0	21.0	3.5	4.0	9.0

CSS语法

@media not|only mediatype and (media feature and|or|not mediafeature) { CSS-Code; }

not，only和and关键字的含义：

not： not关键字恢复整个媒体查询的含义。

only：唯一的关键字可以防止不支持具有媒体功能的媒体查询的旧浏览器应用指定的样式。
它对现代浏览器没有影响。
and：关键字将媒体功能与媒体类型或其他媒体功能相结合。

它们都是可选的。但是，如果您不使用或仅使用，则还必须指定媒体类型。

您还可以为不同的媒体使用不同的样式表，如下所示：

实例

当浏览器窗口宽度为600px或更小时，将<body>元素的背景颜色更改为“lightblue”：

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

尝试一下

媒体类型

值	描述
all	默认。用于所有媒体类型设备
print	用于打印机
screen	用于电脑屏幕，平板电脑，智能手机等。
speech	用于大声“读取”页面的屏幕阅读器

媒体功能

值	描述
any-hover	是否有任何可用的输入机制允许用户将鼠标悬停在元素上？（在Media Queries Level 4中添加）
any-pointer	任何可用的输入机制都是指针设备，如果是，它的准确度如何？（在Media Queries Level 4中添加）
aspect-ratio	视口的宽度和高度之间的比率
color	输出设备的每个颜色分量的位数
color-gamut	用户代理和输出设备支持的大致颜色范围（在媒体查询级别4中添加）
color-index	设备可以显示的颜色数
grid	设备是网格还是位图
height	视口高度
hover	主输入机制是否允许用户将鼠标悬停在元素上？（在Media Queries Level 4中添加）
inverted-colors	浏览器或底层操作系统是否会反转颜色？（在Media Queries Level 4中添加）
light-level	当前环境光照水平（在媒体查询等级4中添加）
max-aspect-ratio	显示区域的宽度和高度之间的最大比率
max-color	输出设备的每个颜色分量的最大位数
max-color-index	设备可以显示的最大颜色数
max-height	显示区域的最大高度，例如浏览器窗口
max-monochrome	单色（灰度）设备上每个“颜色”的最大位数
max-resolution	设备的最大分辨率，使用dpi或dpcm
max-width	显示区域的最大宽度，例如浏览器窗口
min-aspect-ratio	显示区域的宽度和高度之间的最小比率
min-color	输出设备的每个颜色分量的最小位数
min-color-index	设备可以显示的最小颜色数
min-height	显示区域的最小高度，例如浏览器窗口
min-monochrome	单色（灰度）设备上每个“颜色”的最小位数
min-resolution	设备的最小分辨率，使用dpi或dpcm
min-width	显示区域的最小宽度，例如浏览器窗口
monochrome	单色（灰度）设备上每个“颜色”的位数
orientation	视口的方向（横向或纵向模式）
overflow-block	输出设备如何处理沿块轴溢出视口的内容（在媒体查询级别4中添加）
overflow-inline	可以滚动沿着内联轴溢出视口的内容（在媒体查询级别4中添加）
pointer	主要输入机制是指针设备吗？如果是，它的准确程度如何？（在Media Queries Level 4中添加）
resolution	输出设备的分辨率，使用dpi或dpcm
scan	输出设备的扫描过程
scripting	脚本（例如JavaScript）是否可用？（在Media Queries Level 4中添加）
update	输出设备修改内容外观的速度有多快（在Media Queries Level 4中添加）
width	视口宽度