CSS - 媒体查询

上一页
下一页

CSS 中的媒体查询用于根据用户设备的屏幕大小、分辨率和其他特征应用不同的 CSS 样式。当满足特定条件时@media媒体查询使用规则来包含额外的 CSS 属性块。媒体查询还可用于单独设置页面的可打印版本的样式。

语法


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

在这里，媒体类型可以是屏幕、打印、语音等，媒体特征可以是宽度、高度、纵横比、方向等特征。

您可能已经注意到，同一个网站在移动设备和桌面设备上看起来不同。这种类型的屏幕依赖样式是使用 CSS 媒体查询实现的。在本教程中，我们将了解媒体查询以及与它们关联的属性。

介质类型

媒体类型在 CSS 媒体查询中使用，以根据设备应用不同的样式。最常见的媒体类型是 All、Print 和 Screen。如果未指定媒体类型，它将匹配所有设备。

  • all：默认值。此值适用于所有媒体类型。
  • print：此值仅在打印文档时有效。
  • screen：此值仅对屏幕（如计算机、平板电脑和智能手机）有效。
JavaScript 提供了一个称为 CSSMediaRule 的 CSS 对象模型接口，可用于访问使用 @media CSS at 规则创建的规则。

CSS 媒体类型打印

有时，为用户生成的打印版本不需要屏幕中显示的所有样式。印刷版本通常以灰度样式或简单的浅色生成。建议使用这种类型的设计，因为深色背景会消耗打印机的更多墨水。

例

以下示例演示了如何使用媒体类型为 print 的 CSS 媒体查询。


<!DOCTYPE html>
<html>
<head>
	 	 <style>
	 	 	 	 body{
	 	 	 	 	 	 background-color: black;
	 	 	 	 	 	 color: white;
	 	 	 	 	 	 padding: 10px;
	 	 	 	 }
	 	 	 	 @media print {
	 	 	 	 	 	 body {	
	 	 	 	 	 	 	 	 background-color: white;
	 	 	 	 	 	 	 	 color: black;
	 	 	 	 	 	 	 	 padding: 10px;
	 	 	 	 	 	 }
	 	 	 	 }
	 	 	 	 button {
	 	 	 	 	 	 background-color: aqua;
	 	 	 	 	 	 padding: 5px;
	 	 	 	 }
	 	 </style>
</head>
<body>
	 	 <h3> Tutorialspoint </h3>
	 	 <p>CSS Media Type - Print</p>
	 	 <p>
	 	 	 	 Background is white for printable version of this page.
	 	 	 	 Check out...
	 	 </p>

	 	 <button onclick="printPage()">Print Page</button>
	 	 <script>
	 	 function printPage() {
	 	 	 	 window.print();
	 	 }
	 	 </script>
</body>
</html>

CSS 媒体类型 All

这用于指定在所有屏幕尺寸、可打印版本和其他版本中使用的常见样式。

例

以下示例演示如何使用媒体类型为 all 的 CSS 媒体查询


<!DOCTYPE html>
<html>
<head>
	 	 <style>
	 	 	 	 @media all {
	 	 	 	 	 	 body{
	 	 	 	 	 	 	 	 background-color: black;
	 	 	 	 	 	 	 	 color: white;
	 	 	 	 	 	 	 	 padding: 10px;
	 	 	 	 	 	 }
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h3>Tutorialspoint </h3>
	 	 <p> CSS Media Type - All </p>
	 	 <p>	
	 	 	 	 In printable version or any screen size, the	
	 	 	 	 styles of this page is same.
	 	 </p>
	 	 <button onclick="printPage()">
	 	 	 	 Print Page
	 	 </button>
	 	 <script>
	 	 	 	 function printPage() {
	 	 	 	 window.print();
	 	 	 	 }
	 	 </script>
</body>
</html>

CSS 媒体类型屏幕

此值仅对屏幕（如计算机、平板电脑和智能手机）有效。

例

以下示例演示了如果屏幕大小大于 500px，则背景颜色将变为粉红色，文本颜色将变为蓝色


<!DOCTYPE html>
<html>
<head>
	 	 <style>
	 	 	 	 .container {
	 	 	 	 	 	 display: flex;
	 	 	 	 	 	 flex-direction: row;
	 	 	 	 	 	 padding: 10px;
	 	 	 	 	 	 gap: 10px;
	 	 	 	 }
	 	 	 	 .child{
	 	 	 	 	 	 padding: 10px;
	 	 	 	 	 	 background-color: #f0f0f0;
	 	 	 	 	 	 border: 2px solid;
	 	 	 	 }
	 	 	 	 @media screen and (max-width: 500px) {
	 	 	 	 	 	 .container {
	 	 	 	 	 	 	 	 flex-direction: column;
	 	 	 	 	 	 }
	 	 	 	 }
	 	 </style>
</head>
<body>
	 	 <p>
	 	 	 	 Orientation of child elements depend on screen size,
	 	 	 	 for screen size less than 500px, children align in	
	 	 	 	 two different columns.	
	 	 </p>
	 	 <div class="container">
	 	 	 	 <div class="child" > HTML </div>
	 	 	 	 <div class="child"> CSS </div>
	 	 </div>
</body>
</html>

媒体查询的宽度范围

在媒体查询中，您还可以像这样指定屏幕宽度范围。


@media (width > 700px) {
	 	/* Styles for screens that are at least 700px wide */
}

例

以下示例演示了当屏幕宽度介于 600px 和 800px 之间时，背景颜色将变为黄色，文本颜色将变为红色。


<!DOCTYPE html>
<html>
<head>
	 	 <style>
	 	 p {
	 	 	 	 color: blue;
	 	 }
	 	 @media (600px < width < 800px) {
	 	 	 	 p {
	 	 	 	 	 	 background-color: yellow;
	 	 	 	 	 	 color: red;
	 	 	 	 }
	 	 }
	 	 </style>
</head>

<body>
	 	 <h1>Tutorialspoint</h1>
	 	 <p>CSS Media Type - Screen</p>
	 	 <p>Resize the browser size to see the effect.</p>
</body>

</html>

逗号分隔的媒体类型

媒体查询中的逗号类似于逻辑“OR”运算符。

以下声明将适用于屏幕宽度小于 500px 或可打印版本。您也可以使用 OR 运算符代替逗号。


@media (min-width: 500px), print {
	 	 /* Styles */
}

例

以下示例演示如何使用逗号分隔的媒体类型。在打印模式下，背景颜色会发生变化，屏幕尺寸也会> 500 像素


<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 body {
	 	 	 	 	 	 background-color: white;
	 	 	 	 	 	 color: black;
	 	 	 	 }
	 	 	 	 @media (min-width: 500px), print {
	 	 	 	 	 	 body {
	 	 	 	 	 	 	 	 background-color: black;
	 	 	 	 	 	 	 	 color: white;
	 	 	 	 	 	 }
	 	 	 	 }
	 	 button {
	 	 	 	 background-color: violet;
	 	 	 	 padding: 5px;
	 	 }
	 	 </style>
</head>

<body>
	 	 <h1>CSS Media Type - Screen and Print</h1>
	 	 <p>
	 	 	 	 Resize the window to less than 500px to see the	
	 	 	 	 background and font color changes to default.
	 	 </p>

	 	 <p>
	 	 	 	 Click on below button to see the effect when you	
	 	 	 	 print the page. ( Enable background graphics options	
	 	 	 	 if any at print section )
	 	 </p>
	 	 <button onclick="printPage()">Print Page</button>
	 	 <script>
	 	 	 	 function printPage() {
	 	 	 	 	 	 window.print();
	 	 	 	 }
	 	 </script>
</body>
</html>

仅包含 CSS 媒体类型

媒体类型 仅当整个媒体查询匹配时才应用样式。这有助于防止旧版浏览器应用样式。

例

以下示例演示了当屏幕宽度介于 500px 和 700px 之间时，背景颜色将变为粉红色，文本颜色将变为蓝色


<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 body {
	 	 	 	 color: red;
	 	 }
	 	 @media only screen and (min-width: 500px) and (max-width: 700px) {
	 	 	 	 body {
	 	 	 	 	 	 color: blue;
	 	 	 	 	 	 background-color: pink;
	 	 	 	 }
	 	 }
	 	 </style>
</head>
<body>
	 	<h1>Tutorialspoint</h1>
	 	<p>CSS Media Type - Screen</p>
	 	<p>
	 	 Resize the browser window to see the effect.
</p>
</body>
</html>

CSS 媒体查询 AND 运算符

AND 运算符用于在媒体查询中组合多个条件。这两个条件都必须满足，样式才能应用。

例

此示例演示了当屏幕宽度介于 500px 和 700px 之间时，将添加样式。


<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
	 	 <style>
	 	 	 	 body {
	 	 	 	 	 	 background-color: lightgray;
	 	 	 	 	 	 color: black;
	 	 	 	 }
	 	 	 	 @media (min-width: 500px) and (max-width: 700px) {
	 	 	 	 	 	 body {
	 	 	 	 	 	 	 	 background-color: lightgreen;
	 	 	 	 	 	 	 	 color: blue;
	 	 	 	 	 	 }
	 	 	 	 }
	 	 </style>
</head>
<body>
	 	 <h1> Media Query with AND Operator</h1>
	 	 <p>	
	 	 	 	 Resize the browser window between 500px and 700px	
	 	 	 	 to see the effect.
	 	 </p>
</body>
</html>

媒体查询 NOT 运算符

NOT 运算符否定媒体查询，仅当媒体查询不匹配时才应用样式。

NOT 运算符在媒体查询中最后计算，因此上述媒体查询将按如下方式计算：


@media not (all and (monochrome)) {
	 	/* … */
}

/* It's not evaluated like this:*/	
@media (not all) and (monochrome) {
	 	 /* … */
	}

例

在此示例中，NOT 运算符否定条件宽度< 700。


<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
	 	 <style>
	 	 	 	 body {
	 	 	 	 	 	 background-color: lightgray;
	 	 	 	 	 	 color: black;
	 	 	 	 }
	 	 	 	 @media not screen and (width < 700px) {
	 	 	 	 	 	 body {
	 	 	 	 	 	 	 	 background-color: orange;
	 	 	 	 	 	 	 	 color: white;
	 	 	 	 	 	 }
	 	 	 	 }
	 	 </style>
</head>
<body>
	 	 <h1> Media Query with NOT Operator </h1>
	 	 <p>	
	 	 	 	 Resize the browser window to less than 700px	
	 	 	 	 to see the effect.
	 	 </p>
</body>
</html>

创建复杂的媒体查询

您可以通过使用 and、not 和 only 运算符组合多个条件来创建复杂的媒体查询。您还可以将多个媒体查询合并到一个逗号分隔的列表中。

例

在此示例中，我们合并了多个媒体查询，尝试更改浏览器宽度以查看多种效果。


<!DOCTYPE html>
<html>
<head>
	 	 <style>
	 	 	 	 body {
	 	 	 	 	 	 background-color: lightgray;
	 	 	 	 	 	 color: black;
	 	 	 	 }
	 	 	 	 @media only screen and (min-width: 500px) and (max-width: 700px) {
	 	 	 	 	 	 body {
	 	 	 	 	 	 	 	 background-color: pink;
	 	 	 	 	 	 	 	 color: blue;
	 	 	 	 	 	 }
	 	 	 	 }
	 	 	 	 @media not screen and (max-width: 700px) {
	 	 	 	 	 	 body {
	 	 	 	 	 	 	 	 background-color: orange;
	 	 	 	 	 	 	 	 color: white;
	 	 	 	 	 	 }
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h1>	
	 	 	 	 Media Query with AND, NOT, and ONLY Operators	
	 	 </h1>
	 	 <p>	
	 	 	 	 Resize the browser window to see the effects.
	 	 </p>
</body>
</html>

屏幕方向的 CSS 媒体查询

我们可以为用户设备的特定方向（横向或纵向）定义样式。默认值为 portrait。


@media (orientation: portrait) {
	 	 /* Styles */
}

例

以下示例演示了当屏幕宽度大于 500px 且设备处于横向时，文本颜色将变为蓝色


<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 body {
	 	 	 	 	 	 color: red;
	 	 	 	 }
	 	 	 	 @media (min-width: 500px) and (orientation: landscape) {
	 	 	 	 	 	 body {
	 	 	 	 	 	 	 	 color: blue;
	 	 	 	 	 	 }
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h3>Resize the browser window to see the effect.</h3>
	 	 <p>
	 	 	 	 The text color changed to blue when the viewport width is	
	 	 	 	 at least 500px and the device is in landscape orientation.
	 	 </p>
</body>
</html>

媒体查询功能列表

CSS 媒体查询功能用于根据特定特征、输出设备或环境对网页应用不同的样式。

以下是与媒体功能相关的 CSS 属性列表：

媒体属性 描述
any-hover 检查是否有任何用户的输入设备可以将鼠标悬停在页面上的元素上。
any-pointer 确定用户是否有指针设备（如鼠标）以及该设备是否准确。
aspect-ratio 检查视口或呈现图面的纵横比。
color 指定输出设备的每个颜色分量所需的位数。
color-gamut 根据用户设备可以显示的颜色范围，将不同的样式应用于网页。
color-index 检查设备可以显示多少种颜色。
device-aspect-ratio 检查输出设备的宽度和高度之间的纵横比。此媒体功能已过时且很少使用。请改用 aspect-ratio 媒体功能。
device-height 检查输出设备显示区域的高度。此媒体功能已过时且很少使用。请改用高度媒体功能。
device-width 检查输出设备显示区域的宽度。此媒体功能已过时且很少使用。请改用宽度媒体功能。
display-mode 根据 Web 应用程序的当前显示模式检测 Web 内容并设置其样式。（ 全屏 | 独立 | minimal-ui | 浏览器 | window-controls-overlay ）
dynamic-range 检查用户代理和输出设备是否支持高亮度、对比度和颜色深度。
forced-colors 检查用户是否已在其设备上启用强制颜色模式。
grid 检查用户设备或屏幕是否支持网格布局。
height 确定视口的高度。
hover 确定用户的设备是否能够将鼠标悬停在元素上。
monochrome 为了确定位数，用于表示输出设备的单色帧缓冲区中的每个像素。
orientation 检查设备的屏幕或页面是纵向还是横向。
overflow-block 确定用户设备如何处理在垂直方向上超出初始容器边界的内容。
overflow-inline 确定用户设备如何在水平方向上处理超出初始容器边界的内容。
pointer 检查用户是否有可用于指向和单击的指针设备，例如鼠标或触摸屏。
prefers-color-scheme 确定用户是希望网站采用浅色模式还是深色模式。
prefers-contrast 检查用户是否希望网站具有或多或少的对比度。
prefers-reduced-motion 检查用户是否在其设备上启用了设置，以减少不必要的移动动画。
resolution 检查屏幕上每英寸显示多少像素。
width 确定视口的宽度。
update 检查内容在用户设备何时可以更改内容外观后在屏幕上的显示方式
打印本页
上一页
下一页