媒体查询（Media Queries）

核心知识点讲解

媒体查询是 CSS3 中引入的一项强大功能，允许你根据设备的特性（如屏幕尺寸、分辨率、方向等）应用不同的样式规则。媒体查询是实现响应式网页设计的关键技术。

媒体查询的基本语法

媒体查询的基本语法结构如下：

@media media-type and (media-feature) {
  /* CSS 规则 */
}

media-type：指定媒体类型，如 screen（屏幕）、print（打印）、all（所有媒体）等
media-feature：指定媒体特性，如 width（宽度）、height（高度）、orientation（方向）等
and：逻辑操作符，连接媒体类型和媒体特性

常用媒体类型

all：适用于所有媒体类型
screen：适用于电脑屏幕、平板电脑、智能手机等
print：适用于打印预览和打印
speech：适用于屏幕阅读器等语音合成器

常用媒体特性

width：视口宽度
height：视口高度
min-width：最小视口宽度
max-width：最大视口宽度
min-height：最小视口高度
max-height：最大视口高度
orientation：设备方向（portrait 纵向或 landscape 横向）
aspect-ratio：视口宽高比
min-aspect-ratio：最小视口宽高比
max-aspect-ratio：最大视口宽高比
resolution：设备分辨率
device-width：设备屏幕宽度
device-height：设备屏幕高度

逻辑操作符

and：连接多个媒体特性，所有条件都必须满足
not：否定整个媒体查询
only：仅在媒体查询完全匹配时应用样式
,（逗号）：分隔多个媒体查询，只要其中一个匹配就应用样式

媒体查询的放置位置

媒体查询应该放在样式表的末尾，以便它们可以覆盖之前的样式规则。这是因为 CSS 遵循"后来者居上"的原则，当多个规则应用于同一个元素时，最后定义的规则会覆盖之前的规则。

实用案例分析

案例一：基本响应式布局

使用媒体查询创建基本的响应式布局：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>基本响应式布局</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
    }

    .container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }

    header {
      background-color: #333;
      color: white;
      padding: 1rem 0;
    }

    nav {
      background-color: #f4f4f4;
      padding: 0.5rem 0;
    }

    nav ul {
      list-style: none;
      display: flex;
    }

    nav ul li {
      margin-right: 1rem;
    }

    nav ul li a {
      text-decoration: none;
      color: #333;
      padding: 0.5rem;
    }

    main {
      display: flex;
      margin: 2rem 0;
    }

    section {
      flex: 3;
      margin-right: 2rem;
    }

    aside {
      flex: 1;
      background-color: #f4f4f4;
      padding: 1rem;
    }

    footer {
      background-color: #333;
      color: white;
      text-align: center;
      padding: 1rem 0;
      margin-top: 2rem;
    }

    /* 媒体查询：平板设备 */
    @media (max-width: 768px) {
      main {
        flex-direction: column;
      }

      section {
        margin-right: 0;
        margin-bottom: 2rem;
      }

      nav ul {
        flex-direction: column;
      }

      nav ul li {
        margin-right: 0;
        margin-bottom: 0.5rem;
      }
    }

    /* 媒体查询：移动设备 */
    @media (max-width: 480px) {
      header h1 {
        font-size: 1.5rem;
      }

      section h2 {
        font-size: 1.2rem;
      }

      aside h3 {
        font-size: 1.1rem;
      }
    }
  </style>
</head>
<body>
  <header>
    <div class="container">
      <h1>响应式布局示例</h1>
    </div>
  </header>
  <nav>
    <div class="container">
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">服务</a></li>
        <li><a href="#">联系我们</a></li>
      </ul>
    </div>
  </nav>
  <div class="container">
    <main>
      <section>
        <h2>主要内容</h2>
        <p>这是网站的主要内容区域。在桌面设备上，它会显示在侧边栏的左侧；在平板和移动设备上，它会显示在侧边栏的上方。</p>
        <p>响应式设计可以确保网站在不同设备上都能提供良好的用户体验，无论用户使用的是桌面电脑、平板电脑还是智能手机。</p>
        <p>媒体查询是实现响应式设计的关键技术，它允许你根据设备的特性应用不同的样式规则。</p>
      </section>
      <aside>
        <h3>侧边栏</h3>
        <p>这是网站的侧边栏区域。在桌面设备上，它会显示在主要内容的右侧；在平板和移动设备上，它会显示在主要内容的下方。</p>
        <ul>
          <li><a href="#">链接 1</a></li>
          <li><a href="#">链接 2</a></li>
          <li><a href="#">链接 3</a></li>
        </ul>
      </aside>
    </main>
  </div>
  <footer>
    <div class="container">
      <p>&copy; 2023 响应式布局示例</p>
    </div>
  </footer>
</body>
</html>

案例二：响应式网格布局

使用媒体查询创建响应式网格布局：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>响应式网格布局</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      padding: 20px;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
    }

    h1 {
      text-align: center;
      margin-bottom: 30px;
    }

    .grid {
      display: grid;
      grid-gap: 20px;
    }

    .grid-item {
      background-color: #f4f4f4;
      padding: 20px;
      border-radius: 8px;
      text-align: center;
    }

    .grid-item h3 {
      margin-bottom: 10px;
    }

    /* 桌面设备：4列网格 */
    @media (min-width: 1024px) {
      .grid {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    /* 平板设备：2列网格 */
    @media (min-width: 768px) and (max-width: 1023px) {
      .grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    /* 移动设备：1列网格 */
    @media (max-width: 767px) {
      .grid {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>响应式网格布局示例</h1>
    <div class="grid">
      <div class="grid-item">
        <h3>项目 1</h3>
        <p>这是一个网格项目，在桌面设备上会显示为4列网格的一部分。</p>
      </div>
      <div class="grid-item">
        <h3>项目 2</h3>
        <p>这是一个网格项目，在平板设备上会显示为2列网格的一部分。</p>
      </div>
      <div class="grid-item">
        <h3>项目 3</h3>
        <p>这是一个网格项目，在移动设备上会显示为1列网格。</p>
      </div>
      <div class="grid-item">
        <h3>项目 4</h3>
        <p>这是一个网格项目，会根据屏幕尺寸自动调整布局。</p>
      </div>
      <div class="grid-item">
        <h3>项目 5</h3>
        <p>这是一个网格项目，会根据屏幕尺寸自动调整布局。</p>
      </div>
      <div class="grid-item">
        <h3>项目 6</h3>
        <p>这是一个网格项目，会根据屏幕尺寸自动调整布局。</p>
      </div>
      <div class="grid-item">
        <h3>项目 7</h3>
        <p>这是一个网格项目，会根据屏幕尺寸自动调整布局。</p>
      </div>
      <div class="grid-item">
        <h3>项目 8</h3>
        <p>这是一个网格项目，会根据屏幕尺寸自动调整布局。</p>
      </div>
    </div>
  </div>
</body>
</html>

案例三：响应式导航栏

使用媒体查询创建响应式导航栏，在小屏幕上转换为汉堡菜单：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>响应式导航栏</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
    }

    header {
      background-color: #333;
      color: white;
      padding: 1rem 0;
    }

    .container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .logo {
      font-size: 1.5rem;
      font-weight: bold;
    }

    nav ul {
      list-style: none;
      display: flex;
    }

    nav ul li {
      margin-left: 2rem;
    }

    nav ul li a {
      color: white;
      text-decoration: none;
    }

    .menu-toggle {
      display: none;
      cursor: pointer;
    }

    .menu-toggle div {
      width: 25px;
      height: 3px;
      background-color: white;
      margin: 5px 0;
      transition: all 0.3s ease;
    }

    /* 媒体查询：平板和移动设备 */
    @media (max-width: 768px) {
      .menu-toggle {
        display: block;
      }

      nav {
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        background-color: #333;
        padding: 1rem 0;
        transform: translateY(-150%);
        transition: transform 0.3s ease;
      }

      nav.active {
        transform: translateY(0);
      }

      nav ul {
        flex-direction: column;
        align-items: center;
      }

      nav ul li {
        margin: 1rem 0;
      }
    }

    main {
      padding: 2rem;
      max-width: 1200px;
      margin: 0 auto;
    }

    section {
      margin-bottom: 2rem;
    }

    section h2 {
      margin-bottom: 1rem;
    }
  </style>
</head>
<body>
  <header>
    <div class="container">
      <div class="logo">响应式导航栏</div>
      <nav id="nav">
        <ul>
          <li><a href="#">首页</a></li>
          <li><a href="#">关于我们</a></li>
          <li><a href="#">服务</a></li>
          <li><a href="#">联系我们</a></li>
        </ul>
      </nav>
      <div class="menu-toggle" id="menu-toggle">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
  </header>
  <main>
    <section>
      <h2>响应式导航栏示例</h2>
      <p>本示例展示了如何使用媒体查询创建响应式导航栏，在桌面设备上显示为水平导航菜单，在平板和移动设备上转换为汉堡菜单。</p>
      <p>当屏幕宽度小于768像素时，导航菜单会隐藏，取而代之的是一个汉堡菜单按钮。点击汉堡菜单按钮，导航菜单会从顶部滑入显示。</p>
    </section>
    <section>
      <h2>关于响应式设计</h2>
      <p>响应式设计是一种网页设计方法，使网站能够根据访问设备的屏幕尺寸、方向和分辨率自动调整布局和内容。</p>
      <p>媒体查询是实现响应式设计的关键技术，它允许你根据设备的特性应用不同的样式规则。</p>
      <p>通过合理使用媒体查询，你可以创建在各种设备上都能提供良好用户体验的网站。</p>
    </section>
  </main>
  <script>
    const menuToggle = document.getElementById('menu-toggle');
    const nav = document.getElementById('nav');

    menuToggle.addEventListener('click', () => {
      nav.classList.toggle('active');
    });
  </script>
</body>
</html>

总结

媒体查询是实现响应式网页设计的关键技术，它具有以下优势：

设备适配：根据不同设备的特性应用不同的样式规则，确保网站在各种设备上都能提供良好的用户体验
灵活性：支持多种媒体特性和逻辑操作符，可以创建复杂的条件规则
可维护性：将不同屏幕尺寸的样式规则组织在一起，便于管理和维护
用户体验：确保网站在任何设备上都能正常显示和使用，提高用户满意度

媒体查询的应用场景非常广泛，包括但不限于：

响应式布局设计
适配不同屏幕尺寸的设备
根据设备方向调整布局
为打印设备优化样式
根据屏幕分辨率调整图像和字体大小