《CSS 简易速速上手小册》第3章：CSS 响应式设计（2024 最新版）

文章目录

• [3.1 媒体查询基础：网页的智能眼镜](#3.1 媒体查询基础：网页的智能眼镜)
• • [3.1.1 基础知识](#3.1.1 基础知识)
  • [3.1.2 重点案例：适应三种设备的响应式布局](#3.1.2 重点案例：适应三种设备的响应式布局)
  • [3.1.3 拓展案例 1：改变字体大小](#3.1.3 拓展案例 1：改变字体大小)
  • [3.1.4 拓展案例 2：暗模式适配](#3.1.4 拓展案例 2：暗模式适配)
• [3.2 响应式图片和视频：让内容自由呼吸](#3.2 响应式图片和视频：让内容自由呼吸)
• • [3.2.1 基础知识](#3.2.1 基础知识)
  • [3.2.2 重点案例：响应式图片画廊](#3.2.2 重点案例：响应式图片画廊)
  • [3.2.3 拓展案例 1：使用 `<picture>` 元素适配暗模式](#3.2.3 拓展案例 1：使用 <picture> 元素适配暗模式)
  • [3.2.4 拓展案例 2：创建响应式视频](#3.2.4 拓展案例 2：创建响应式视频)
• [3.3 移动优先与桌面优先策略：瑜伽大师的两种姿态](#3.3 移动优先与桌面优先策略：瑜伽大师的两种姿态)
• • [3.3.1 基础知识](#3.3.1 基础知识)
  • [3.3.2 重点案例：从移动到桌面的响应式博客布局](#3.3.2 重点案例：从移动到桌面的响应式博客布局)
  • [3.3.3 拓展案例 1：移动优先的导航菜单](#3.3.3 拓展案例 1：移动优先的导航菜单)
  • [3.3.4 拓展案例 2：响应式图片展示](#3.3.4 拓展案例 2：响应式图片展示)

3.1 媒体查询基础：网页的智能眼镜

在数字世界的时尚秀上，网页需要能够自如地切换它们的"服装"，以适应各种屏幕尺寸和环境。这就是媒体查询（Media Queries）发挥作用的地方，它们就像是网页的智能眼镜，帮助网页观察和适应周围的环境。通过使用媒体查询，我们可以为不同的屏幕尺寸、方向、分辨率等条件定义不同的CSS规则。

3.1.1 基础知识

• 媒体类型 ：包括 all、print、screen 等，分别适用于所有设备、打印机和屏幕设备。
• 媒体特性 ：例如 width、height、orientation（方向）等，用于描述媒体的特定特性。
• 媒体查询语法 ：媒体查询允许我们根据媒体类型和一个或多个媒体特性的值来应用CSS规则。例如：@media (min-width: 600px) { ... } 表示屏幕宽度至少为600像素时应用的规则。

3.1.2 重点案例：适应三种设备的响应式布局

假设你正在设计一个简单的响应式布局，需要适应手机、平板和桌面三种不同的屏幕尺寸。

• HTML 结构：

<div class="container">
  <header>头部</header>
  <main>主要内容</main>
  <aside>侧边栏</aside>
  <footer>页脚</footer>
</div>

• CSS 样式：

.container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 600px) {
  .container {
    grid-template-columns: 2fr 1fr;
  }
}

@media (min-width: 1000px) {
  .container {
    grid-template-columns: 3fr 1fr;
  }
}

在这个案例中，我们使用了媒体查询来调整网格布局的列数，以适应不同的屏幕宽度。在宽度至少为600像素的屏幕上，布局变为两列；在宽度至少为1000像素的屏幕上，布局变为三列加上侧边栏。

3.1.3 拓展案例 1：改变字体大小

为了提高在小屏设备上的可读性，我们可能需要在屏幕尺寸较小的设备上减小字体大小。

• CSS 样式：

body {
  font-size: 16px;
}

@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

通过设置一个最大宽度为600像素的媒体查询，我们减小了小屏设备上的字体大小，使内容更易于阅读。

3.1.4 拓展案例 2：暗模式适配

许多用户喜欢在低光环境中使用暗模式，我们可以使用媒体查询来为这些用户提供更舒适的视觉体验。

• CSS 样式：

@media (prefers-color-scheme: dark) {
  body {
    background-color: #333;
    color: #fff;
  }
}

这个媒体查询检查用户的系统是否设置为暗模式，并相应地调整网页的背景颜色和文字颜色。

通过这些案例，我们可以看到媒体查询如何使得创建响应式网站变得简单而直观。无论是适应不同的设备尺寸、调整字体大小还是适配暗模式，媒体查询都是实现这些目标的强大工具。继绀实践和探索媒体查询的可能性，让你的网站在任何环境下都能完美展现。

---

3.2 响应式图片和视频：让内容自由呼吸

在响应式设计的舞台上，图片和视频是那些需要特别关照的明星。如果处理得当，它们可以在任何尺寸的屏幕上都展现出最佳状态，为用户带来视觉上的享受。让我们探索如何让这些内容元素在响应式网页设计中"自由呼吸"，无论是在宽敞的桌面显示器上，还是在紧凑的手机屏幕上。

3.2.1 基础知识

• 使用 srcset 和 sizes 属性 ：HTML5 引入了 srcset 属性，让我们可以为 <img> 标签指定一系列的图片资源，浏览器会根据屏幕条件选择最合适的一张。sizes 属性则允许我们定义一系列的媒体条件（如屏幕宽度），并为每一条件指定一个图片大小。
• 使用 <picture> 元素 ：<picture> 元素允许更多的灵活性，通过包含零个或多个 <source> 元素以及一个 <img> 元素作为回退，可以根据不同的条件（包括媒体查询）来指定不同的图片资源。
• 响应式视频：视频也可以是响应式的，通常通过设置视频容器的宽度为100%，高度自动调整来实现。

3.2.2 重点案例：响应式图片画廊

假设你需要创建一个图片画廊，其中的图片需要根据访问者的屏幕尺寸加载不同分辨率的图片。

• HTML 结构：

<img src="example-small.jpg"
     srcset="example-small.jpg 500w, example-medium.jpg 1000w, example-large.jpg 1500w"
     sizes="(max-width: 600px) 500px, (max-width: 900px) 1000px, 1500px"
     alt="示例图片">

在这个案例中，srcset 属性定义了三种不同宽度的图片资源，而 sizes 属性则根据屏幕宽度的不同条件来指定使用哪个资源。这样，浏览器会选择最适合当前屏幕尺寸的图片来显示。

3.2.3 拓展案例 1：使用 <picture> 元素适配暗模式

当网站支持暗模式时，我们可能希望根据用户的偏好显示不同风格的图片。

• HTML 结构：

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="example-dark.jpg">
  <source media="(prefers-color-scheme: light)" srcset="example-light.jpg">
  <img src="example-light.jpg" alt="在不支持 source 元素的浏览器中显示">
</picture>

使用 <picture> 和 <source> 元素，我们可以根据系统的颜色方案偏好来加载不同的图片，从而提升用户体验。

3.2.4 拓展案例 2：创建响应式视频

为了确保视频内容也能在不同设备上良好展示，我们需要使视频容器具有响应性。

• HTML + CSS：

<div class="responsive-video">
  <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
</div>

.responsive-video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 比例 */
  height: 0;
  overflow: hidden;
}

.responsive-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

通过创建一个包装器 div 并使用上述 CSS 规则，我们可以让视频自适应容器的宽度，同时保持正确的宽高比，确保视频在任何设备上都能完美播放。

通过这些案例，我们学会了如何使图片和视频在响应式网页设计中自由呼吸，确保它们在不同设备上都能以最佳状态展现。掌握了这些技巧后，你就能为你的网站访问者提供一个无论在哪种设备上都能享受的美好视觉体验。继续探索和实验吧，让你的内容在数字世界中自由呼吸！

---

3.3 移动优先与桌面优先策略：瑜伽大师的两种姿态

在响应式设计的世界里，"移动优先" 和 "桌面优先" 是两种常见的开发策略，它们就像瑜伽大师在展示不同姿态时的两种起始点。选择哪一种，取决于你的目标受众、内容策略以及设计理念。

3.3.1 基础知识

• 移动优先（Mobile First）：这种策略是从最小的屏幕尺寸（通常是手机）开始设计和开发，然后逐渐添加更多的特性和布局来适应更大的屏幕。它强调内容的优先级和核心功能，确保所有用户都能获得最优质的体验。
• 桌面优先（Desktop First）：相反，这种策略是从桌面尺寸的屏幕开始设计，然后通过逐步减少内容和布局复杂度来适应更小的屏幕。这种方法适合内容丰富、功能复杂的网站。
• 断点（Breakpoints）：无论采用哪种策略，断点都是关键概念。断点是在媒体查询中定义的，用于在不同屏幕尺寸下改变布局和样式。

3.3.2 重点案例：从移动到桌面的响应式博客布局

假设你正在设计一个博客网站，希望它在手机、平板和桌面上都能提供优秀的阅读体验。

• HTML 结构：

<div class="blog">
  <header>博客头部</header>
  <main>博客文章</main>
  <aside>侧边栏</aside>
  <footer>页脚</footer>
</div>

• CSS 样式：

.blog {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 600px) {
  .blog {
    grid-template-columns: 3fr 1fr;
  }
}

@media (min-width: 1000px) {
  .blog {
    grid-template-columns: 4fr 1fr;
    grid-template-areas:
      "header header"
      "main aside"
      "footer footer";
  }
}

从移动优先的角度出发，我们首先为手机屏幕设计了一个单列布局。随后通过媒体查询逐步为平板和桌面屏幕引入更复杂的多列布局。

3.3.3 拓展案例 1：移动优先的导航菜单

对于导航菜单，移动优先的方法通常涉及到一个折叠式菜单，它在桌面上展开为水平菜单。

• HTML 结构：

<nav class="mobile-first-nav">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">文章</a></li>
    <li><a href="#">关于</a></li>
  </ul>
</nav>

• CSS 样式：

.mobile-first-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

@media (min-width: 600px) {
  .mobile-first-nav ul {
    flex-direction: row;
  }
}

这个例子展示了如何使用移动优先策略来创建一个适应不同屏幕尺寸的导航菜单。

3.3.4 拓展案例 2：响应式图片展示

针对不同设备，展示不同尺寸的图片也是响应式设计的一部分。

• HTML 结构：

<img src="small.jpg"
     srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
     sizes="(max-width: 600px) 500px, (max-width: 900px) 1000px, 1500px"
     alt="示例图片">

利用 srcset 和 sizes 属性，我们可以根据屏幕宽度为用户提供最合适的图片大小，从而优化加载时间和视觉体验。

通过这些案例，我们可以看到，无论是移动优先还是桌面优先策略，关键在于理解目标用户和内容优先级，以及如何利用CSS的强大功能来适应不同设备。这样的策略让我们的网站不仅仅能够在任何设备上工作，而且能够为每个用户提供最佳的体验。继续实践这些技巧，让你的网站成为真正的响应式瑜伽大师！