参考手册
CSS3 Box Sizing
CSS Flexbox

CSS3 媒体查询

媒体查询（Media Queries）可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS 样式。

媒体查询非常实用，尤其是当你想要根据设备的大致类型（如打印设备与带屏幕的设备）或者特定的特征和设备参数（例如屏幕分辨率和浏览器视窗宽度）来修改网站或应用程序时。

CSS2 引入了媒体类型

CSS2 中引入了 @media 规则，它让为不同媒体类型定义不同样式规则成为可能。

例如：您可能有一组用于计算机屏幕的样式规则、一组用于打印机、一组用于手持设备，甚至还有一组用于电视，等等。不幸的是，除了打印媒体类型之外，这些媒体类型从未得到过设备的大规模支持。

CSS3 引入了媒体查询

CSS3 中的媒体查询扩展了 CSS2 媒体类型的概念：它们并不查找设备类型，而是关注设备的能力。

媒体查询可用于检查许多事情，例如：

  • 视口的宽度和高度
  • 设备的宽度和高度
  • 方向（平板电脑/手机处于横向还是纵向模式）
  • 分辨率

使用媒体查询是一种流行的技术，可以向台式机、笔记本电脑、平板电脑和手机（例如 iPhone 和 Android 手机）提供定制的样式表。

浏览器支持

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

属性
@media21.09.03.54.09.0

媒体查询语法

媒体查询由一种媒体类型组成，并可包含一个或多个表达式，这些表达式可以解析为 true 或 false。

  1. @media not|only mediatype and (expressions) {
  2.   CSS-Code;
  3. }

如果指定的媒体类型与正在显示文档的设备类型匹配，并且媒体查询中的所有表达式均为 true，则查询结果为 true。当媒体查询为 true 时，将应用相应的样式表或样式规则，并遵循正常的级联规则。

除非您使用 not 或 only 运算符，否则媒体类型是可选的，且隐含 all 类型。您还可以针对不同的媒体使用不同的样式表：

  1. <link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

CSS3 媒体类型

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

媒体查询的简单实例

使用媒体查询的一种方法是在样式表内有一个备用的 CSS 部分。

下面的例子在视口宽度为 480 像素或更宽时将背景颜色更改为浅绿色（如果视口小于 480 像素，则背景颜色会是粉色）：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. body {
  6.   background-color: pink;
  7. }
  9. @media screen and (min-width: 480px) {
  10.   body {
  11.     background-color: lightgreen;
  12.   }
  13. }
  14. </style>
  15. </head>
  16. <body>
  18. <h1>请调整浏览器窗口大小来查看效果！</h1>
  19. <p>此媒体查询值应用于：媒体类型为 screen，且视口为 480px 或更宽。</p>
  21. </body>
  22. </html>

下例显示了一个菜单，如果视口的宽度为 480 像素或更宽，则该菜单会浮动到页面的左侧（如果视口小于 480 像素，则该菜单将位于内容的顶部）：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <style>
  6. .wrapper {overflow: auto;}
  8. #main {margin-left: 4px;}
  10. #leftsidebar {
  11.   float: none;
  12.   width: auto;
  13. }
  15. #menulist {
  16.   margin: 0;
  17.   padding: 0;
  18. }
  20. .menuitem {
  21.   background: #CDF0F6;
  22.   border: 1px solid #d4d4d4;
  23.   border-radius: 4px;
  24.   list-style-type: none;
  25.   margin: 4px;
  26.   padding: 2px;
  27. }
  29. @media screen and (min-width: 480px) {
  30.   #leftsidebar {width: 200px; float: left;}
  31.   #main {margin-left: 216px;}
  32. }
  33. </style>
  34. </head>
  35. <body>
  37. <div class="wrapper">
  38.   <div id="leftsidebar">
  39.     <ul id="menulist">
  40.       <li class="menuitem">Menu-item 1</li>
  41.       <li class="menuitem">Menu-item 2</li>
  42.       <li class="menuitem">Menu-item 3</li>
  43.       <li class="menuitem">Menu-item 4</li>
  44.       <li class="menuitem">Menu-item 5</li>
  45.     </ul>
  46.   </div>
  48.   <div id="main">
  49.     <h1>请调整浏览器窗口大小来查看效果！</h1>
  50.     <p>本例显示了一个菜单，如果视口为 480 像素或更宽，它将向页面左侧浮动。如果视口小于 480 像素，则菜单将位于内容的顶部。</p>
  51.   </div>
  52. </div>
  54. </body>
  55. </html>

更多媒体查询实例

下面演示一个简单的例子，让我们来更改不同设备的背景色：

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. body {
  6.   background-color: tan;
  7.   color: black;
  8. }
  10. /* 在宽度为 992px 或更小的屏幕上，背景颜色为蓝色 */
  11. @media screen and (max-width: 992px) {
  12.   body {
  13.     background-color: blue;
  14.     color: white;
  15.   }
  16. }
  18. /* 在宽度为 600px 或更小的屏幕上，背景色为橄榄色 */
  19. @media screen and (max-width: 600px) {
  20.   body {
  21.     background-color: olive;
  22.     color: white;
  23.   }
  24. }
  25. </style>
  26. </head>
  27. <body>
  29. <h2>请调整浏览器窗口大小以查看效果！</h2>
  30. <p>默认情况下，文档的背景色为棕褐色。如果屏幕尺寸为 992px 或更小，则颜色将变为蓝色。如果小于或等于 600px，它将变为橄榄色。</p>
  32. </body>
  33. </html>
您想知道我们为什么要精确使用 992px 和 600px 吗？它们就是我们所称的设备的“典型断点”（typical breakpoints）。您访问本站的 响应式 Web 设计教程 中学习有关典型断点的更多知识。

菜单的媒体查询

在本例中，我们使用媒体查询来创建响应式导航菜单，该菜单在不同的屏幕尺寸上会有所不同。

大屏幕:

首页 链接 1 链接 2 链接 3

小屏幕:

首页 链接 1 链接 2 链接 3

实例
  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="#">Link</a>
  49.   <a href="#">Link</a>
  50.   <a href="#">Link</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. /* 在 992px 或更小的屏幕上，从四列变为两列 */
  25. @media screen and (max-width: 992px) {
  26.   .column {
  27.     width: 50%;
  28.   }
  29. }
  31. /* 在宽度小于或等于 600px 的屏幕上，使列堆叠在一起，而不是彼此相邻 */
  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><b>请调整浏览器窗口的大小以查看响应效果。</b>在宽度小于或等于 992px 的屏幕上，列的大小将从四列调整为两列。在宽度为 600px 或更小的屏幕上，这些列将堆叠在一起，而不是彼此相邻。</p>
  44. <div class="row">
  45.   <div class="column" style="background-color:#aaa;">
  46.     <h2>Column 1</h2>
  47.     <p>Some text..</p>
  48.   </div>
  50.   <div class="column" style="background-color:#bbb;">
  51.     <h2>Column 2</h2>
  52.     <p>Some text..</p>
  53.   </div>
  55.   <div class="column" style="background-color:#ccc;">
  56.     <h2>Column 3</h2>
  57.     <p>Some text..</p>
  58.   </div>
  60.   <div class="column" style="background-color:#ddd;">
  61.     <h2>Column 4</h2>
  62.     <p>Some text..</p>
  63.   </div>
  64. </div>
  66. </body>
  67. </html>

提示：更现代的创建列布局方法是使用 CSS Flexbox（请参见下面的例子）。但是，Internet Explorer 10 以及更早版本不支持它。如果需要 IE6-10 的支持，请使用浮动（如上所示）。

如需学习有关弹性框布局模块的更多知识，请学习 CSS Flexbox 这一章。

如需学习有关响应式 Web 设计的更多知识，请访问本站的 响应式 Web 设计教程。

  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. .row {
  12.   display: flex;
  13.   flex-wrap: wrap;
  14. }
  16. /* 创建四个等列 */
  17. .column {
  18.   flex: 25%;
  19.   padding: 20px;
  20. }
  22. /* 在 992px 或更小的屏幕上，从四列变为两列 */
  23. @media screen and (max-width: 992px) {
  24.   .column {
  25.     flex: 50%;
  26.   }
  27. }
  29. /* 在宽度小于或等于 60px 的屏幕上，使列堆叠在一起，而不是彼此相邻 */
  30. @media screen and (max-width: 600px) {
  31.   .row {
  32.     flex-direction: column;
  33.   }
  34. }
  35. </style>
  36. </head>
  37. <body>
  39. <h2>响应式四列弹性布局</h2>
  40. <p><b>请调整浏览器窗口的大小以查看响应效果。</b>在宽度小于或等于 992px 的屏幕上，列的大小将从四列调整为两列。在宽度为 600px 或更小的屏幕上，这些列将堆叠在一起，而不是彼此相邻。</p>
  42. <div class="row">
  43.   <div class="column" style="background-color:#aaa;">
  44.     <h2>Column 1</h2>
  45.     <p>Some text..</p>
  46.   </div>
  48.   <div class="column" style="background-color:#bbb;">
  49.     <h2>Column 2</h2>
  50.     <p>Some text..</p>
  51.   </div>
  53.   <div class="column" style="background-color:#ccc;">
  54.     <h2>Column 3</h2>
  55.     <p>Some text..</p>
  56.   </div>
  58.   <div class="column" style="background-color:#ddd;">
  59.     <h2>Column 4</h2>
  60.     <p>Some text..</p>
  61.   </div>
  62. </div>
  64. </body>
  65. </html>

用媒体查询隐藏元素

媒体查询的另一种常见用法是在不同屏幕尺寸上隐藏元素：

在小屏幕上我会隐藏。
实例
  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">Example DIV.</div>
  24. <p>当浏览器的宽度为 600 像素或更小时，隐藏 div 元素。请调整浏览器窗口的大小以查看效果。</p>
  26. </body>
  27. </html>

用媒体查询改变字体

您还可以使用媒体查询来更改不同屏幕尺寸上的元素的字体大小：

可变的字体大小。

实例
  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: lightgrey;
  8.   padding: 20px;
  9. }
  11. @media screen and (min-width: 600px) {
  12.   div.example {
  13.     font-size: 80px;
  14.   }
  15. }
  17. @media screen and (max-width: 600px) {
  18.   div.example {
  19.     font-size: 30px;
  20.   }
  21. }
  22. </style>
  23. </head>
  24. <body>
  26. <h2>在不同的屏幕尺寸上更改元素的字体大小</h2>
  28. <div class="example">Example DIV.</div>
  30. <p>当浏览器的宽度为 600 像素或更小时，将 DIV 的字体大小设置为 30px。当它是 601 像素或更宽时，将字体大小设置为 80 像素。请调整浏览器窗口的大小以查看效果。</p>
  32. </body>
  33. </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>

最小宽度到最大宽度

您还可以使用 max-width 和 min-width 属性设置最小宽度和最大宽度。

例如，当浏览器的宽度在 600 到 900 像素之间时，更改 <div> 元素的外观：

  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) {
  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 像素之间时，更改 DIV 的外观。<b>请调整浏览器窗口大小以查看效果。</b></p>
  24. </body>
  25. </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 的外观。<b>请调整浏览器窗口大小以查看效果。</b></p>
  24. </body>
  25. </html>

CSS @media 参考手册

有关所有媒体类型和特性/表达式的完整概述，请查看我们的 CSS 参考中的 @media 规则。

CSS3 Box Sizing
CSS Flexbox

分类导航