CSS @media 规则
示例
当浏览器窗口宽度小于或等于 600px 时，将 <body> 元素的背景颜色更改为 "lightblue"
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
自己动手试一试 »
更多“自己尝试”的例子见下文。
定义和用法
@media 规则用于媒体查询，以便为不同的媒体类型/设备应用不同的样式。
媒体查询可以检查许多内容，例如：
- 视口的宽度和高度
- 设备的宽度和高度
- 方向（平板/手机是横向还是纵向模式？）
- resolution
使用媒体查询是提供定制样式表（响应式 Web 设计）到桌面、笔记本电脑、平板电脑和手机的流行技术。
您还可以使用媒体查询来指定某些样式仅用于打印文档或屏幕阅读器（mediatype: print, screen, or speech）。
除了媒体类型，还有媒体特性。媒体特性通过允许测试用户代理或显示设备的特定功能，为媒体查询提供更详细的信息。例如，您可以仅将样式应用于大于或小于特定宽度的屏幕。
浏览器支持
表格中的数字表示完全支持 @media 规则的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| @media | 21 | 9 | 3.5 | 4.0 | 9 |
CSS 语法
@media not|only mediatype and (mediafeature and|or|not mediafeature) {
CSS-代码;
}
not、only 和 and 关键字的含义
not: not 关键字反转整个媒体查询的含义。
only: only 关键字阻止不支持带有媒体特性的媒体查询的旧浏览器应用指定样式。它对现代浏览器没有影响。
and: and 关键字将媒体特性与媒体类型或其他媒体特性结合起来。
它们都是可选的。但是，如果您使用 not 或 only，则必须同时指定媒体类型。
您还可以为不同的媒体设置不同的样式表，如下所示：
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
....
更多示例
示例
当浏览器宽度小于或等于 600px 时隐藏一个元素
@media screen and (max-width: 600px) {
div.example {
display: none;
}
}
自己动手试一试 »
示例
使用 mediaqueries 将背景颜色设置为 lavender，如果视口宽度为 800 像素或更宽；设置为 lightgreen，如果视口宽度在 400 到 799 像素之间。如果视口小于 400 像素，背景颜色为 lightblue
body {
background-color: lightblue;
}
@media screen and (min-width: 400px) {
body {
background-color: lightgreen;
}
}
@media screen and (min-width: 800px) {
body {
background-color: lavender;
}
}
自己动手试一试 »
示例
创建响应式导航菜单（在大屏幕上水平显示，在小屏幕上垂直显示）
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}
自己动手试一试 »
示例
使用媒体查询创建响应式列布局
/* 在宽度为 992px 或更小的屏幕上，从四列变为两列 */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* 在宽度为 600px 或更小的屏幕上，使列堆叠而不是并排显示 */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
自己动手试一试 »
示例
媒体查询还可以根据浏览器方向更改页面布局。您可以设置一组 CSS 属性，这些属性仅在浏览器窗口的宽度大于其高度时生效，这是一种所谓的“横向”模式。
如果方向为横向模式，则使用浅蓝色背景颜色
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
自己动手试一试 »
示例
使用 mediaqueries 将文本颜色设置为绿色，当文档在屏幕上显示时，当打印时设置为黑色
@media screen {
body {
color: green;
}
}
@media print {
body {
color: black;
}
}
自己动手试一试 »
示例
逗号分隔列表：使用逗号将另一个媒体查询添加到已有的媒体查询中（这将表现得像 OR 操作符）
/* 当宽度在 600px 和 900px 之间 或 大于 1100px 时 - 更改 <div> 的外观 */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
自己动手试一试 »
相关页面
CSS 教程：CSS 媒体查询
CSS 教程：CSS 媒体查询示例
RWD 教程：使用媒体查询实现响应式 Web 设计
JavaScript 教程：window.matchMedia() 方法
