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

什么是媒体查询?

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

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

实例

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

  1. @media only screen and (max-width: 600px) {
  2. body {
  3. background-color: lightblue;
  4. }
  5. }

responsive_mediaquery.htm

添加断点

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

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

RWD 媒体查询 - 图1 RWD 媒体查询 - 图2
桌面电脑 手机

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

实例

当屏幕(浏览器窗口)小于 768px 时,每列的宽度应为 100%:

  1. /* 针对桌面设备: */
  2. .col-1 {width: 8.33%;}
  3. .col-2 {width: 16.66%;}
  4. .col-3 {width: 25%;}
  5. .col-4 {width: 33.33%;}
  6. .col-5 {width: 41.66%;}
  7. .col-6 {width: 50%;}
  8. .col-7 {width: 58.33%;}
  9. .col-8 {width: 66.66%;}
  10. .col-9 {width: 75%;}
  11. .col-10 {width: 83.33%;}
  12. .col-11 {width: 91.66%;}
  13. .col-12 {width: 100%;}
  14. @media only screen and (max-width: 768px) {
  15. /* 针对手机: */
  16. [class*="col-"] {
  17. width: 100%;
  18. }
  19. }

responsive_breakpoints.htm

始终移动优先设计

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

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

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

实例

  1. /* 针对手机: */
  2. [class*="col-"] {
  3. width: 100%;
  4. }
  5. @media only screen and (min-width: 768px) {
  6. /* 针对桌面: */
  7. .col-1 {width: 8.33%;}
  8. .col-2 {width: 16.66%;}
  9. .col-3 {width: 25%;}
  10. .col-4 {width: 33.33%;}
  11. .col-5 {width: 41.66%;}
  12. .col-6 {width: 50%;}
  13. .col-7 {width: 58.33%;}
  14. .col-8 {width: 66.66%;}
  15. .col-9 {width: 75%;}
  16. .col-10 {width: 83.33%;}
  17. .col-11 {width: 91.66%;}
  18. .col-12 {width: 100%;}
  19. }

responsive_mobilefirst.htm

另一个断点

您可以添加任意多个断点。

我们还会在平板电脑和手机之间插入一个断点。

RWD 媒体查询 - 图3 RWD 媒体查询 - 图4 RWD 媒体查询 - 图5
桌面电脑 平板电脑 手机

为此,我们添加了一个媒体查询(在 600 像素),并为大于 600 像素(但小于 768 像素)的设备添加了一组新类:

实例

请注意,两组类几乎相同,唯一的区别是名称(col- 和 col-s-):

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

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

HTML 实例

对于台式机:

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

对于平板电脑:

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

  1. <div class="row">
  2. <div class="col-3 col-s-3">...</div>
  3. <div class="col-6 col-s-9">...</div>
  4. <div class="col-3 col-s-12">...</div>
  5. </div>

responsive_col-s.htm

典型的设备断点

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

实例

  1. /* 超小型设备(电话,600px 及以下) */
  2. @media only screen and (max-width: 600px) {...}
  3. /* 小型设备(纵向平板电脑和大型手机,600 像素及以上) */
  4. @media only screen and (min-width: 600px) {...}
  5. /* 中型设备(横向平板电脑,768 像素及以上) */
  6. @media only screen and (min-width: 768px) {...}
  7. /* 大型设备(笔记本电脑/台式机,992px 及以上) */
  8. @media only screen and (min-width: 992px) {...}
  9. /* 超大型设备(大型笔记本电脑和台式机,1200px 及以上) */
  10. @media only screen and (min-width: 1200px) {...}

responsive_mediaquery_breakpoints.htm

方向:人像 / 风景

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

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

实例

如果方向为横向模式(landscape mode),则网页背景为浅蓝色:

  1. @media only screen and (orientation: landscape) {
  2. body {
  3. background-color: lightblue;
  4. }
  5. }

responsive_mediaquery_orientation.htm

用媒体查询隐藏元素

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

实例

  1. /* 如果屏幕尺寸为 600 像素或更小,请隐藏该元素 */
  2. @media only screen and (max-width: 600px) {
  3. div.example {
  4. display: none;
  5. }
  6. }

css_mediaqueries_hide.htm

用媒体查询修改字体

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

实例

  1. /* 如果屏幕尺寸为 601px 或更大,请将 <div> 的 font-size 设置为 80px */
  2. @media only screen and (min-width: 601px) {
  3. div.example {
  4. font-size: 80px;
  5. }
  6. }
  7. /* 如果屏幕尺寸为 600px 或更小,请将 <div> 的 font-size 设置为 30px */
  8. @media only screen and (max-width: 600px) {
  9. div.example {
  10. font-size: 30px;
  11. }
  12. }

css_mediaqueries_fontsize.htm

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