CSS @media 规则
示例
当浏览器窗口宽度小于或等于 600 像素时，将 <body> 元素的背景颜色更改为“lightblue”
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
亲自尝试 »
下面还有更多“亲自尝试”示例。
定义和用法
在媒体查询中使用 @media 规则，为不同的媒体类型/设备应用不同的样式。
媒体查询可用于检查许多内容，例如
- 视窗的宽度和高度
- 设备的宽度和高度
- 方向（平板电脑/手机处于横向还是纵向模式？）
- 分辨率
使用媒体查询是一种流行的技术，用于为台式机、笔记本电脑、平板电脑和手机提供定制的样式表（响应式网页设计）。
您还可以使用媒体查询来指定某些样式仅适用于打印文档或屏幕阅读器（mediatype：print、screen 或 speech）。
除了媒体类型之外，还有媒体特征。媒体特征通过允许测试用户代理或显示设备的特定特征，为媒体查询提供更具体的细节。例如，您可以将样式仅应用于宽度大于或小于某个特定宽度的屏幕。
浏览器支持
表中的数字指定了完全支持 @media 规则的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| @media | 21 | 9 | 3.5 | 4.0 | 9 |
CSS 语法
@media not|only mediatype and (mediafeature and|or|not mediafeature) {
CSS-Code;
}
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">
....
更多示例
示例
当浏览器的宽度小于或等于 600 像素时，隐藏元素
@media screen and (max-width: 600px) {
div.example {
display: none;
}
}
亲自尝试 »
示例
使用媒体查询，如果视窗宽度大于或等于 800 像素，则将背景颜色设置为 lavender，如果视窗宽度介于 400 到 799 像素之间，则将背景颜色设置为 lightgreen。如果视窗宽度小于 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%;
}
}
亲自尝试 »
示例
使用媒体查询创建响应式列布局
/* 在宽度小于或等于 992 像素的屏幕上，将四列变为两列 */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* 在宽度小于或等于 600 像素的屏幕上，使列堆叠在一起，而不是并排 */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
亲自尝试 »
示例
媒体查询还可以用于根据浏览器的方向更改页面的布局。您可以有一组 CSS 属性，这些属性仅在浏览器窗口的宽度大于其高度时应用，即所谓的“横向”方向。
如果方向处于横向模式，则使用 lightblue 背景颜色
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
亲自尝试 »
示例
使用媒体查询，当文档在屏幕上显示时，将文本颜色设置为绿色，当打印时，将文本颜色设置为黑色
@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 教程：使用媒体查询的响应式网页设计
JavaScript 教程：window.matchMedia() 方法
