参考手册
RWD 网格视图
RWD 图像

响应式网页设计 - 媒体查询

什么是媒体查询？

媒体查询是 CSS3 中引入的一种 CSS 技术。

仅在满足特定条件时，它才会使用 @media 规则来引用 CSS 属性块。

实例

如果浏览器窗口是 600px 或更小，则背景颜色为浅蓝色：

  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 (max-width: 600px) {
  11.   body {
  12.     background-color: lightblue;
  13.   }
  14. }
  15. </style>
  16. </head>
  17. <body>
  19. <p>请调整浏览器窗口的大小。如果此文档的宽度为 600 像素或更小，背景颜色为“浅蓝色”，否则为“浅绿色”。</p>
  21. </body>
  22. </html>
运行一下

添加断点

在本教程中稍早前，我们制作了一张包含行和列的网页，但是这张响应式网页在小屏幕上看起来效果并不好。

媒体查询可以帮助您。我们可以添加一个断点，其中设计的某些部分在断点的每一侧会表现得有所不同。

桌面电脑
手机

使用媒体查询在 768px 处添加断点：

当屏幕（浏览器窗口）小于 768px 时，每列的宽度应为 100％：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <style>
  6. * {
  7.   box-sizing: border-box;
  8. }
  10. .row::after {
  11.   content: "";
  12.   clear: both;
  13.   display: block;
  14. }
  16. [class*="col-"] {
  17.   float: left;
  18.   padding: 15px;
  19. }
  21. html {
  22.   font-family: "Lucida Sans", sans-serif;
  23. }
  25. .header {
  26.   background-color: #9933cc;
  27.   color: #ffffff;
  28.   padding: 15px;
  29. }
  31. .menu ul {
  32.   list-style-type: none;
  33.   margin: 0;
  34.   padding: 0;
  35. }
  37. .menu li {
  38.   padding: 8px;
  39.   margin-bottom: 7px;
  40.   background-color: #33b5e5;
  41.   color: #ffffff;
  42.   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  43. }
  45. .menu li:hover {
  46.   background-color: #0099cc;
  47. }
  49. .aside {
  50.   background-color: #33b5e5;
  51.   padding: 15px;
  52.   color: #ffffff;
  53.   text-align: center;
  54.   font-size: 14px;
  55.   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  56. }
  58. .footer {
  59.   background-color: #0099cc;
  60.   color: #ffffff;
  61.   text-align: center;
  62.   font-size: 12px;
  63.   padding: 15px;
  64. }
  66. /* 针对桌面： */
  67. .col-1 {width: 8.33%;}
  68. .col-2 {width: 16.66%;}
  69. .col-3 {width: 25%;}
  70. .col-4 {width: 33.33%;}
  71. .col-5 {width: 41.66%;}
  72. .col-6 {width: 50%;}
  73. .col-7 {width: 58.33%;}
  74. .col-8 {width: 66.66%;}
  75. .col-9 {width: 75%;}
  76. .col-10 {width: 83.33%;}
  77. .col-11 {width: 91.66%;}
  78. .col-12 {width: 100%;}
  80. @media only screen and (max-width: 768px) {
  81.   /* 针对手机： */
  82.   [class*="col-"] {
  83.     width: 100%;
  84.   }
  85. }
  86. </style>
  87. </head>
  88. <body>
  90. <div class="header">
  91.   <h2>上海</h2>
  92. </div>
  94. <div class="row">
  95.   <div class="col-3 menu">
  96.     <ul>
  97.       <li>交通</li>
  98.       <li>文化</li>
  99.       <li>旅游</li>
  100.       <li>美食</li>
  101.     </ul>
  102.   </div>
  104.   <div class="col-6">
  105.     <h2>欢迎来到上海</h2>
  106.     <p>上海市，简称沪，别称申，是中华人民共和国直辖市，中国的经济、金融、贸易和航运中心，世界著名的港口城市，是中国人口第二多的城市。</p>
  107.   </div>
  109.   <div class="col-3 right">
  110.     <div class="aside">
  111.       <h2>历史</h2>
  112.       <p>最晚在新石器时代，上海地区已经有先民聚居。春秋时代，上海由吴国管辖，战国时代则是楚国领土 ...</p>
  113.       <h2>位置</h2>
  114.       <p>上海位于中国东部弧形海岸线的正中间，长江三角洲最东部，东临东海，南濒杭州湾，西与江苏、浙江两省相接 ...</p>
  115.       <h2>环境</h2>
  116.       <p>上海地处江南水乡，并位于长江入海口，亦不处于主要地震带上，因此如地震、洪水以及地质类灾害鲜有发生 ...</p>
  117.     </div>
  118.   </div>
  119. </div>
  121. <div class="footer">
  122.   <p>请调整浏览器窗口的大小，以查看内容如何响应调整大小。</p>
  123. </div>
  125. </body>
  126. </html>
运行一下

始终移动优先设计

移动优先（Mobile First）指的是在对台式机或任何其他设备进行设计之前，优先针对移动设备进行设计（这将使页面在较小的设备上显示得更快）。

这意味着我们必须在 CSS 中做一些改进。

当宽度小于 768px 时，我们应该修改设计，而不是更改宽度。我们就这样进行了“移动优先”的设计：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <style>
  6. * {
  7.   box-sizing: border-box;
  8. }
  10. .row::after {
  11.   content: "";
  12.   clear: both;
  13.   display: table;
  14. }
  16. [class*="col-"] {
  17.   float: left;
  18.   padding: 15px;
  19. }
  21. html {
  22.   font-family: "Lucida Sans", sans-serif;
  23. }
  25. .header {
  26.   background-color: #9933cc;
  27.   color: #ffffff;
  28.   padding: 15px;
  29. }
  31. .menu ul {
  32.   list-style-type: none;
  33.   margin: 0;
  34.   padding: 0;
  35. }
  37. .menu li {
  38.   padding: 8px;
  39.   margin-bottom: 7px;
  40.   background-color: #33b5e5;
  41.   color: #ffffff;
  42.   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  43. }
  45. .menu li:hover {
  46.   background-color: #0099cc;
  47. }
  49. .aside {
  50.   background-color: #33b5e5;
  51.   padding: 15px;
  52.   color: #ffffff;
  53.   text-align: center;
  54.   font-size: 14px;
  55.   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  56. }
  58. .footer {
  59.   background-color: #0099cc;
  60.   color: #ffffff;
  61.   text-align: center;
  62.   font-size: 12px;
  63.   padding: 15px;
  64. }
  66. /* 针对手机： */
  67. [class*="col-"] {
  68.   width: 100%;
  69. }
  71. @media only screen and (min-width: 768px) {
  72.   /* For desktop: */
  73.   .col-1 {width: 8.33%;}
  74.   .col-2 {width: 16.66%;}
  75.   .col-3 {width: 25%;}
  76.   .col-4 {width: 33.33%;}
  77.   .col-5 {width: 41.66%;}
  78.   .col-6 {width: 50%;}
  79.   .col-7 {width: 58.33%;}
  80.   .col-8 {width: 66.66%;}
  81.   .col-9 {width: 75%;}
  82.   .col-10 {width: 83.33%;}
  83.   .col-11 {width: 91.66%;}
  84.   .col-12 {width: 100%;}
  85. }
  86. </style>
  87. </head>
  88. <body>
  90. <div class="header">
  91.   <h1>上海</h1>
  92. </div>
  94. <div class="row">
  95.   <div class="col-3 menu">
  96.     <ul>
  97.       <li>交通</li>
  98.       <li>文化</li>
  99.       <li>旅游</li>
  100.       <li>美食</li>
  101.     </ul>
  102.   </div>
  104.   <div class="col-6">
  105.     <h1>欢迎来到上海</h1>
  106.     <p>上海市，简称沪，别称申，是中华人民共和国直辖市，中国的经济、金融、贸易和航运中心，世界著名的港口城市，是中国人口第二多的城市。</p>
  107.   </div>
  109.   <div class="col-3 right">
  110.     <div class="aside">
  111.       <h2>历史</h2>
  112.       <p>最晚在新石器时代，上海地区已经有先民聚居。春秋时代，上海由吴国管辖，战国时代则是楚国领土 ...</p>
  113.       <h2>位置</h2>
  114.       <p>上海位于中国东部弧形海岸线的正中间，长江三角洲最东部，东临东海，南濒杭州湾，西与江苏、浙江两省相接 ...</p>
  115.       <h2>环境</h2>
  116.       <p>上海地处江南水乡，并位于长江入海口，亦不处于主要地震带上，因此如地震、洪水以及地质类灾害鲜有发生 ...</p>
  117.     </div>
  118.   </div>
  119. </div>
  121. <div class="footer">
  122.   <p>请调整浏览器窗口的大小，来查看内容如何响应调整大小。</p>
  123. </div>
  125. </body>
  126. </html>
运行一下

另一个断点

您可以添加任意多个断点。我们还会在平板电脑和手机之间插入一个断点。

桌面电脑
平板电脑
手机

为此，我们添加了一个媒体查询（在 600 像素），并为大于 600 像素（但小于 768 像素）的设备添加了一组新类：

请注意，两组类几乎相同，唯一的区别是名称（col- 和 col-s-）：

  1. /* 针对手机： */
  2. [class*="col-"] {
  3.   width: 100%;
  4. }
  6. @media only screen and (min-width: 600px) {
  7.   /* 针对平板电脑： */
  8.   .col-s-1 {width: 8.33%;}
  9.   .col-s-2 {width: 16.66%;}
  10.   .col-s-3 {width: 25%;}
  11.   .col-s-4 {width: 33.33%;}
  12.   .col-s-5 {width: 41.66%;}
  13.   .col-s-6 {width: 50%;}
  14.   .col-s-7 {width: 58.33%;}
  15.   .col-s-8 {width: 66.66%;}
  16.   .col-s-9 {width: 75%;}
  17.   .col-s-10 {width: 83.33%;}
  18.   .col-s-11 {width: 91.66%;}
  19.   .col-s-12 {width: 100%;}
  20. }
  22. @media only screen and (min-width: 768px) {
  23.   /* 针对桌面： */
  24.   .col-1 {width: 8.33%;}
  25.   .col-2 {width: 16.66%;}
  26.   .col-3 {width: 25%;}
  27.   .col-4 {width: 33.33%;}
  28.   .col-5 {width: 41.66%;}
  29.   .col-6 {width: 50%;}
  30.   .col-7 {width: 58.33%;}
  31.   .col-8 {width: 66.66%;}
  32.   .col-9 {width: 75%;}
  33.   .col-10 {width: 83.33%;}
  34.   .col-11 {width: 91.66%;}
  35.   .col-12 {width: 100%;}
  36. }

有两组相同的类似乎很奇怪，但是它给了我们机会用 HTML 来决定在每个断点处的列会发生什么：

HTML 实例

对于台式机：

第一和第三部分都会跨越 3 列。中间部分将跨越 6 列。

对于平板电脑：

第一部分将跨越 3 列，第二部分将跨越 9 列，第三部分将显示在前两部分的下方，并将跨越 12 列：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <style>
  6. * {
  7.   box-sizing: border-box;
  8. }
  10. .row::after {
  11.   content: "";
  12.   clear: both;
  13.   display: table;
  14. }
  16. [class*="col-"] {
  17.   float: left;
  18.   padding: 15px;
  19. }
  21. html {
  22.   font-family: "Lucida Sans", sans-serif;
  23. }
  25. .header {
  26.   background-color: #9933cc;
  27.   color: #ffffff;
  28.   padding: 15px;
  29. }
  31. .menu ul {
  32.   list-style-type: none;
  33.   margin: 0;
  34.   padding: 0;
  35. }
  37. .menu li {
  38.   padding: 8px;
  39.   margin-bottom: 7px;
  40.   background-color: #33b5e5;
  41.   color: #ffffff;
  42.   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  43. }
  45. .menu li:hover {
  46.   background-color: #0099cc;
  47. }
  49. .aside {
  50.   background-color: #33b5e5;
  51.   padding: 15px;
  52.   color: #ffffff;
  53.   text-align: center;
  54.   font-size: 14px;
  55.   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  56. }
  58. .footer {
  59.   background-color: #0099cc;
  60.   color: #ffffff;
  61.   text-align: center;
  62.   font-size: 12px;
  63.   padding: 15px;
  64. }
  66. /* For mobile phones: */
  67. [class*="col-"] {
  68.   width: 100%;
  69. }
  71. @media only screen and (min-width: 600px) {
  72.   /* 针对平板电脑： */
  73.   .col-s-1 {width: 8.33%;}
  74.   .col-s-2 {width: 16.66%;}
  75.   .col-s-3 {width: 25%;}
  76.   .col-s-4 {width: 33.33%;}
  77.   .col-s-5 {width: 41.66%;}
  78.   .col-s-6 {width: 50%;}
  79.   .col-s-7 {width: 58.33%;}
  80.   .col-s-8 {width: 66.66%;}
  81.   .col-s-9 {width: 75%;}
  82.   .col-s-10 {width: 83.33%;}
  83.   .col-s-11 {width: 91.66%;}
  84.   .col-s-12 {width: 100%;}
  85. }
  86. @media only screen and (min-width: 768px) {
  87.   /* 针对桌面： */
  88.   .col-1 {width: 8.33%;}
  89.   .col-2 {width: 16.66%;}
  90.   .col-3 {width: 25%;}
  91.   .col-4 {width: 33.33%;}
  92.   .col-5 {width: 41.66%;}
  93.   .col-6 {width: 50%;}
  94.   .col-7 {width: 58.33%;}
  95.   .col-8 {width: 66.66%;}
  96.   .col-9 {width: 75%;}
  97.   .col-10 {width: 83.33%;}
  98.   .col-11 {width: 91.66%;}
  99.   .col-12 {width: 100%;}
  100. }
  101. </style>
  102. </head>
  103. <body>
  105. <div class="header">
  106.   <h2>上海</h2>
  107. </div>
  109. <div class="row">
  110.   <div class="col-3 col-s-3 menu">
  111.     <ul>
  112.       <li>交通</li>
  113.       <li>文化</li>
  114.       <li>旅游</li>
  115.       <li>美食</li>
  116.     </ul>
  117.   </div>
  119.   <div class="col-6 col-s-9">
  120.     <h2>欢迎来到上海</h2>
  121.     <p>上海市，简称沪，别称申，是中华人民共和国直辖市，中国的经济、金融、贸易和航运中心，世界著名的港口城市，是中国人口第二多的城市。</p>
  122.   </div>
  124.   <div class="col-3 col-s-12">
  125.     <div class="aside">
  126.       <h2>历史</h2>
  127.       <p>最晚在新石器时代，上海地区已经有先民聚居。春秋时代，上海由吴国管辖，战国时代则是楚国领土 ...</p>
  128.       <h2>位置</h2>
  129.       <p>上海位于中国东部弧形海岸线的正中间，长江三角洲最东部，东临东海，南濒杭州湾，西与江苏、浙江两省相接 ...</p>
  130.       <h2>环境</h2>
  131.       <p>上海地处江南水乡，并位于长江入海口，亦不处于主要地震带上，因此如地震、洪水以及地质类灾害鲜有发生 ...</p>
  132.     </div>
  133.   </div>
  134. </div>
  136. <div class="footer">
  137.   <p>请调整浏览器窗口的大小，以查看内容如何响应调整大小。</p>
  138. </div>
  140. </body>
  141. </html>
运行一下

典型的设备断点

高度和宽度不同的屏幕和设备不计其数，因此很难为每个设备创建精确的断点。为了简单起见，您可以瞄准这五组：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <style>
  6. .example {
  7.   padding: 20px;
  8.   color: white;
  9. }
  10. /* 超小型设备（600px及以下的手机） */
  11. @media only screen and (max-width: 600px) {
  12.   .example {background: red;}
  13. }
  15. /* 小型设备（平板电脑竖屏模式和大屏手机，600 像素及以上） */
  16. @media only screen and (min-width: 600px) {
  17.   .example {background: green;}
  18. }
  20. /* 中型设备（平板电脑横屏模式，768 像素及以上） */
  21. @media only screen and (min-width: 768px) {
  22.   .example {background: blue;}
  23. } 
  25. /* 大型设备（笔电、台式机，992 像素及以上） */
  26. @media only screen and (min-width: 992px) {
  27.   .example {background: orange;}
  28. } 
  30. /* 超大型设备（大屏笔电、台式机，1200 像素及以上） */
  31. @media only screen and (min-width: 1200px) {
  32.   .example {background: pink;}
  33. }
  34. </style>
  35. </head>
  36. <body>
  38. <h1>典型的媒体查询断点</h1>
  39. <p class="example">请调整浏览器窗口的大小，来查看该段落的背景色在不同屏幕尺寸下如何变化。</p>
  41. </body>
  42. </html>
运行一下

方向：人像 / 风景

媒体查询还可用于根据浏览器的方向来更改页面的布局。

您可以设置一组 CSS 属性，这些属性仅在浏览器窗口的宽度大于其高度时才适用，即所谓的“横屏”方向：

实例

如果方向为横向模式（landscape mode），则网页背景为浅蓝色：

  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. <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. <h1>隐藏不同屏幕尺寸的元素</h1>
  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. <h1>在不同的屏幕尺寸上更改元素的字体大小</h1>
  28. <div class="example">Example DIV.</div>
  30. <p>当浏览器的宽度为 600 像素或更小时，将 DIV 的字体大小设置为 30px。当它是 601 像素或更宽时，将字体大小设置为 80 像素。请调整浏览器窗口的大小以查看效果。</p>
  32. </body>
  33. </html>
运行一下

CSS @media 参考手册

有关所有媒体类型和特性/表达式的完整概述，请在 CSS 参考手册中参阅 @media 规则。

RWD 网格视图
RWD 图像

分类导航