参考手册
CSS 属性大全
max-width
min-height
返回 CSS 属性大全

CSS @media 规则

@media CSS @规则 可用于基于一个或多个 媒体查询 的结果来应用样式表的一部分。 使用它，您可以指定一个媒体查询和一个CSS块，当且仅当该媒体查询与正在使用其内容的设备匹配时，该CSS块 样式才能应用于该文档。

实例

如果浏览器窗口的宽度为 600px 或更小时，把 <body> 元素的背景颜色更改为“浅蓝色”：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <style>
  6. body {
  7.   background-color: yellow;
  8. }
  10. @media only screen and (max-width: 600px) {
  11.   body {
  12.     background-color: lightblue;
  13.   }
  14. }
  15. </style>
  16. </head>
  17. <body>
  19. <h1>@media 规则</h1>
  21. <p>请调整浏览器窗口的大小。如果此文档的宽度为 600 像素或更小，背景颜色为“浅蓝色”，否则为“黄色”。</p>
  23. </body>
  24. </html>
运行一下

可以在页面下方找到更多 TIY 实例。

定义和用法

@media 规则在媒体查询中用于为不同的媒体类型/设备应用不同的样式。媒体查询可用于检查许多事情，诸如：视口的宽度和高度设备的宽度和高度方向（手机或平板电脑处于横屏还是竖屏模式？）分辨率使用媒体查询是一种流行的技术，用于向台式机、笔记本电脑、平板电脑和手机提供定制的样式表（响应式网页设计）。您还可以使用媒体查询来规定某些样式仅适用于打印的文档或屏幕阅读器（mediatype：print、screen 或 speech）。除了媒体类型之外，还有媒体特性。媒体特性通过允许测试用户代理或显示设备的具体特性，为媒体查询提供了更多特定细节。例如，您可以将样式仅应用于大于或小于特定宽度的屏幕。

浏览器支持

表格中的数字注明了完全支持 @media 规则的首个浏览器版本。

属性
@media2193.54.09

CSS 语法

  1. @media not|only mediatype and (mediafeature and|or|not mediafeature) {
  2.   CSS-Code;
  3. }
not、only 和 and 关键字的含义：

not：not 关键字反正整个媒体查询的含义。only：only 关键字可防止旧版浏览器应用指定的样式，这些浏览器不支持带媒体特性的媒体查询。它对现代浏览器没有影响。and：and 关键字将媒体特性与媒体类型或其他媒体特性组合在一起。它们都是可选的。但是，如果使用 not 或 only，则还必须指定媒体类型。您还可以针对不同的媒体使用不同的样式表，就像这样：

  1. <link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
  2. <link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
  3. ....
媒体类型
值描述
all默认。用于所有媒体类型设备。
print用于打印机。
screen用于计算机屏幕、平板电脑、智能手机等。
speech用于朗读页面的屏幕阅读器。
媒体特性
值描述
any-hover

是否有任何可用的输入机制允许用户（将鼠标等）悬停在元素上？

在 Media Queries Level 4 中被添加。

any-pointer

可用的输入机制中是否有任何指针设备，如果有，它的精度如何？

在 Media Queries Level 4 中被添加。

aspect-ratio视口（viewport）的宽高比。
color

输出设备每个像素的比特值，常见的有 8、16、32 位。

如果设备不支持输出彩色，则该值为 0。

color-gamut

用户代理和输出设备大致程度上支持的色域。

在 Media Queries Level 4 中被添加。

color-index

输出设备的颜色查询表（color lookup table）中的条目数量。

如果设备不使用颜色查询表，则该值为 0。

device-aspect-ratio

输出设备的宽高比。

已在 Media Queries Level 4 中被弃用。

device-height

输出设备渲染表面（如屏幕）的高度。

已在 Media Queries Level 4 中被弃用。

device-width

输出设备渲染表面（如屏幕）的宽度。

已在 Media Queries Level 4 中被弃用。

display-mode

应用程序的显示模式，如 web app 的 manifest 中的 display 成员所指定

在 Web App Manifest spec 被定义。

forced-colors

检测是用户代理否限制调色板。

在 Media Queries Level 5 中被添加。

grid输出设备使用网格屏幕还是点阵屏幕？
height视口（viewport）的高度。
hover

主输入机制是否允许用户将鼠标悬停在元素上？

在 Media Queries Level 4 中被添加。

inverted-colors

浏览器或者底层操作系统是否反转了颜色。

在 Media Queries Level 5 中被添加。

light-level

当前环境光水平。

在 Media Queries Level 5 中被添加。

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

输出设备单色帧缓冲区中每个像素的位深度。

如果设备并非黑白屏幕，则该值为 0。

orientation视窗（viewport）的旋转方向（横屏还是竖屏模式）。
overflow-block

输出设备如何处理沿块轴溢出视口(viewport)的内容。

在 Media Queries Level 4 中被添加。

overflow-inline

沿内联轴溢出视口(viewport)的内容是否可以滚动？

在 Media Queries Level 4 中被添加。

pointer

主要输入机制是一个指针设备吗？如果是，它的精度如何？

在 Media Queries Level 4 中被添加。

prefers-color-scheme

探测用户倾向于选择亮色还是暗色的配色方案。

在 Media Queries Level 5 中被添加。

prefers-contrast

探测用户是否有向系统要求提高或降低相近颜色之间的对比度。

在 Media Queries Level 5 中被添加。

prefers-reduced-motion

用户是否希望页面上出现更少的动态效果。

在 Media Queries Level 5 中被添加。

prefers-reduced-transparency

用户是否倾向于选择更低的透明度。

在 Media Queries Level 5 中被添加。

resolution输出设备的分辨率，使用 dpi 或 dpcm。
scan输出设备的扫描过程（适用于电视等）。
scripting

探测脚本（例如 JavaScript）是否可用。

在 Media Queries Level 5 中被添加。

update

输出设备更新内容的渲染结果的频率。

在 Media Queries Level 4 中被添加。

width视窗（viewport）的宽度。

更多实例

当浏览器的宽度为 600px 或更小时，隐藏元素：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1">
  5. <style>
  6. div.example {
  7.   background-color: yellow;
  8.   padding: 20px;
  9. }
  11. @media screen and (max-width: 600px) {
  12.   div.example {
  13.     display: none;
  14.   }
  15. }
  16. </style>
  17. </head>
  18. <body>
  20. <h2>在不同的屏幕尺寸上隐藏元素</h2>
  22. <div class="example">示例 DIV</div>
  24. <p>请调整浏览器窗口的大小以查看响应效果。如果浏览器宽度小于或等于 600 像素，则隐藏元素。</p>
  26. </body>
  27. </html>
运行一下

如果视口的宽度为 800 像素或更宽，请使用媒体查询将背景色设置为淡紫色；如果视口的宽度介于 400 至 799 像素之间，则使用媒体查询将背景色设置为浅绿色。如果视口小于 400 像素，则背景色为浅蓝色：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. body {
  6.   background-color: lightblue;
  7. }
  9. @media screen and (min-width: 400px) {
  10.   body {
  11.     background-color: lightgreen;
  12.   }
  13. }
  15. @media screen and (min-width: 800px) {
  16.   body {
  17.     background-color: lavender;
  18.   }
  19. }
  20. </style>
  21. </head>
  22. <body>
  24. <h1>请调整浏览器窗口大小以查看效果！</h1>
  25. <p>如果视口的宽度为 800 像素或更宽，使用媒体查询将背景色设置为淡紫色；如果视口的宽度介于 400 至 799 像素之间，背景色为浅绿色。如果视口小于 400 像素，则背景色为浅蓝色。</p>
  27. </body>
  28. </html>
运行一下

创建一个响应式导航菜单（在大屏幕上水平显示，在小屏幕上垂直显示）：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <style>
  7. * {
  8.   box-sizing: border-box;
  9. }
  11. /* 设置顶部导航栏的样式 */
  12. .topnav {
  13.   overflow: hidden;
  14.   background-color: #333;
  15. }
  17. /* 设置 topnav 链接的样式 */
  18. .topnav a {
  19.   float: left;
  20.   display: block;
  21.   color: #f2f2f2;
  22.   text-align: center;
  23.   padding: 14px 16px;
  24.   text-decoration: none;
  25. }
  27. /* 在鼠标悬停时改变颜色 */
  28. .topnav a:hover {
  29.   background-color: #ddd;
  30.   color: black;
  31. }
  33. /* 如果屏幕等于或小于 600 像素，则菜单链接堆叠而不是并排 */
  34. @media screen and (max-width: 600px) {
  35.   .topnav a {
  36.     float: none;
  37.     width: 100%;
  38.   }
  39. }
  40. </style>
  41. </head>
  42. <body>
  44. <h2>响应式导航菜单</h2>
  45. <p>请调整浏览器窗口大小来查看效果：如果屏幕小于 600 像素，导航菜单将垂直而不是水平显示。</p>
  47. <div class="topnav">
  48.   <a href="#">链接</a>
  49.   <a href="#">链接</a>
  50.   <a href="#">链接</a>
  51. </div>
  53. </body>
  54. </html>
运行一下

使用媒体查询来创建响应式列布局：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1">
  5. <style>
  6. * {
  7.   box-sizing: border-box;
  8. }
  10. /* 创建并排浮动的四列 */
  11. .column {
  12.   float: left;
  13.   width: 25%;
  14.   padding: 20px;
  15. }
  17. /* 在列后清除浮动 */
  18. .row:after {
  19.   content: "";
  20.   display: table;
  21.   clear: both;
  22. }
  24. /* 如果屏幕宽度为 992 像素或更窄，则四列变为两列 */
  25. @media screen and (max-width: 992px) {
  26.   .column {
  27.     width: 50%;
  28.   }
  29. }
  31. /* 如果屏幕宽度为 600 像素或更窄，则列堆叠而不是并排 */
  32. @media screen and (max-width: 600px) {
  33.   .column {
  34.     width: 100%;
  35.   }
  36. }
  37. </style>
  38. </head>
  39. <body>
  41. <h2>响应式四列布局</h2>
  42. <p>请调整浏览器窗口的大小以查看响应效果。在宽度为 992px 或更窄的屏幕上，列会调整尺寸，将从四列变为为两列。在宽度为 600 像素或更小的屏幕上，这些列将堆叠，而不是并排。</p>
  44. <div class="row">
  45.   <div class="column" style="background-color:#aaa;">
  46.   <h2>列 1</h2>
  47.   <p>一些文本..</p>
  48.   </div>
  49.   <div class="column" style="background-color:#bbb;">
  50.   <h2>列 2</h2>
  51.   <p>一些文本..</p>
  52.   </div>
  53.   <div class="column" style="background-color:#ccc;">
  54.   <h2>列 3</h2>
  55.   <p>一些文本..</p>
  56.   </div>
  57.   <div class="column" style="background-color:#ddd;">
  58.   <h2>列 4</h2>
  59.   <p>一些文本..</p>
  60.   </div>
  61. </div>
  63. </body>
  64. </html>
运行一下
实例

使用媒体查询来创建响应式网站：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <style>
  7. * {
  8.   box-sizing: border-box;
  9. }
  11. /* 设置 body 的样式 */
  12. body {
  13.   font-family: Arial;
  14.   margin: 0;
  15. }
  17. /* 页眉/LOGO */
  18. .header {
  19.   padding: 60px;
  20.   text-align: center;
  21.   background: #1abc9c;
  22.   color: white;
  23. }
  25. /* 设置顶部导航栏的样式 */
  26. .navbar {
  27.   display: flex;
  28.   background-color: #333;
  29. }
  31. /* 设置导航栏链接的样式 */
  32. .navbar a {
  33.   color: white;
  34.   padding: 14px 20px;
  35.   text-decoration: none;
  36.   text-align: center;
  37. }
  39. /* 当鼠标悬停时改变颜色 */
  40. .navbar a:hover {
  41.   background-color: #ddd;
  42.   color: black;
  43. }
  45. /* 列容器 */
  46. .row {
  47.   display: flex;
  48.   flex-wrap: wrap;
  49. }
  51. /* 创建两个并排的等列 */
  52. /* Sidebar/left column */
  53. .side {
  54.   flex: 30%;
  55.   background-color: #f1f1f1;
  56.   padding: 20px;
  57. }
  59. /* 主列 */
  60. .main {
  61.   flex: 70%;
  62.   background-color: white;
  63.   padding: 20px;
  64. }
  66. /* 伪图像，仅供示例 */
  67. .fakeimg {
  68.   background-color: #aaa;
  69.   width: 100%;
  70.   padding: 20px;
  71. }
  73. /* 页脚 */
  74. .footer {
  75.   padding: 20px;
  76.   text-align: center;
  77.   background: #ddd;
  78. }
  80. /* 响应式布局 - 当屏幕宽度小于 700 像素时，使两列堆叠，而不是并排 */
  81. @media (max-width: 700px) {
  82.   .row, .navbar {
  83.     flex-direction: column;
  84.   }
  85. }
  86. </style>
  87. </head>
  88. <body>
  90. <!-- 注释 -->
  91. <div style="background:yellow;padding:5px">
  92.   <h4 style="text-align:center">请调整浏览器窗口的大小以查看响应效果。</h4>
  93. </div>
  95. <!-- Header -->
  96. <div class="header">
  97.   <h2>我的网站</h2>
  98.   <p>拥有<b>弹性</b>布局。</p>
  99. </div>
  101. <!-- 导航栏 -->
  102. <div class="navbar">
  103.   <a href="#">链接</a>
  104.   <a href="#">链接</a>
  105.   <a href="#">链接</a>
  106.   <a href="#">链接</a>
  107. </div>
  109. <!-- 弹性网格（内容） -->
  110. <div class="row">
  111.   <div class="side">
  112.     <h2>关于我</h2>
  113.     <h5>我的照片：</h5>
  114.     <div class="fakeimg" style="height:200px;">图像</div>
  115.     <p>hello world!</p>
  116.     <h3>更多文本</h3>
  117.     <p>Welcome to Shanghai！</p>
  118.     <div class="fakeimg" style="height:60px;">图像</div><br>
  119.     <div class="fakeimg" style="height:60px;">图像</div><br>
  120.     <div class="fakeimg" style="height:60px;">图像</div>
  121.   </div>
  122.   <div class="main">
  123.     <h2>标题</h2>
  124.     <h5>标题描述, Dec 7, 2021</h5>
  125.     <div class="fakeimg" style="height:200px;">图像</div>
  126.     <p>一些文本..</p>
  127.     <p>上海是中华人民共和国四个直辖市之一。欢迎来到上海！</p>
  128.     <br>
  129.     <h2>标题</h2>
  130.     <h5>标题描述, Sep 2, 2021</h5>
  131.     <div class="fakeimg" style="height:200px;">图像</div>
  132.     <p>一些文本..</p>
  133.     <p>上海是中华人民共和国四个直辖市之一。欢迎来到上海！</p>
  134.   </div>
  135. </div>
  137. <!-- 页脚 -->
  138. <div class="footer">
  139.   <h2>页脚</h2>
  140. </div>
  142. </body>
  143. </html>
运行一下
实例

媒体查询还可以用于根据浏览器的方向更改页面的布局。您可以写一组 CSS 属性，这些属性仅在浏览器窗口的宽度大于其高度（即“横屏”方向）时才适用。如果方向处于横屏模式，则使用浅蓝色背景色：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <style>
  6. body {
  7.   background-color: lightgreen;
  8. }
  10. @media only screen and (orientation: landscape) {
  11.   body {
  12.     background-color: lightblue;
  13.   }
  14. }
  15. </style>
  16. </head>
  17. <body>
  19. <p>请调整浏览器窗口大小来查看效果：如果文档宽度大于高度，则背景色为浅蓝色，否则为浅绿色。</p>
  21. </body>
  22. </html>
运行一下
实例

使用媒体查询将文本颜色设置为在屏幕上显示文档时为绿色，在打印时为黑色：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. @media screen {
  6.   body {
  7.     color: green;
  8.   }
  9. }
  11. @media print {
  12.   body {
  13.     color: black;
  14.   }
  15. }
  16. </style>
  17. </head>
  18. <body>
  20. <h1>@media 规则</h1>
  21. <p>在屏幕上显示文档时，使用媒体查询将文本颜色设置为绿色，在打印时为黑色。</p>
  23. </body>
  24. </html>
运行一下
实例

逗号分隔的列表：使用逗号将另一个媒体查询添加到已存在的媒体查询中（它的行为类似 OR 运算符）：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1">
  5. <style>
  6. @media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  7.   div.example {
  8.     font-size: 50px;
  9.     padding: 50px;
  10.     border: 8px solid black;
  11.     background: yellow;
  12.   }
  13. }
  14. </style>
  15. </head>
  16. <body>
  18. <h2>改变 DIV 在不同屏幕尺寸上的外观</h2>
  20. <div class="example">Example DIV.</div>
  22. <p>请调整浏览器窗口的大小以查看响应效果。如果浏览器宽度在 600 到 900 像素之间或超过 1100 像素，则改变 DIV 的外观。</p>
  24. </body>
  25. </html>
运行一下

相关页面

CSS 教程：CSS 媒体查询

RWD 教程：通过媒体查询实现响应式 Web 设计

JavaScript 教程：window.matchMedia() 方法

max-width
min-height

分类导航