l-1

WEB教程

主页/CSS教程/CSS高级特性/CSS媒体查询media queries

CSS教程

CSS媒体查询media queries

CSS媒体查询media queries详解：断点设置技巧

1. 媒体查询基础概念

CSS媒体查询是一种CSS3功能，允许开发者根据设备的特定特性（如屏幕宽度、高度、方向等）应用不同的CSS样式规则。通过媒体查询，可以创建响应式网页设计，使网站能够适应各种设备尺寸和类型，从移动设备到桌面显示器再到电视屏幕。

媒体查询由媒体类型和一个或多个条件表达式组成，这些条件表达式描述了媒体特征。当媒体类型与设备类型匹配，且所有条件表达式都为真时，媒体查询内的CSS规则就会被应用。

—

2. 媒体查询语法结构

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

@media media-type and (media-feature-rule) {
  /* CSS rules go here */
}

媒体查询语句包含以下组成部分：

  • 媒体类型：指定查询适用的设备类型
  • 媒体特性规则：定义应用CSS规则所需满足的条件
  • CSS规则集：当媒体查询条件满足时应用的样式规则

媒体查询可以在以下几种场景中使用：

  1. 在HTML的<link>标签中通过media属性指定
  2. 在CSS中使用@import规则引入
  3. 在CSS文件中直接使用@media规则

—

3. 媒体类型详解

媒体类型指定了媒体查询针对的设备类别。以下是常用的媒体类型：

媒体类型描述
all适用于所有媒体设备
screen主要用于计算机屏幕、平板电脑和智能手机等
print用于打印预览和打印文档时
speech用于语音合成器

如果不指定媒体类型，默认值为all。

在实际开发中，最常用的是screen和print媒体类型。例如，可以为屏幕显示和打印输出设置不同的样式：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>媒体类型示例</title>
  <style>
    /* 屏幕显示样式 */
    @media screen {
      body {
        font-size: 16px;
        background-color: #f0f0f0;
      }
      .print-only {
        display: none;
      }
    }

    /* 打印样式 */
    @media print {
      body {
        font-size: 12pt;
        background-color: white;
      }
      .screen-only {
        display: none;
      }
      .print-only {
        display: block;
      }
    }
  </style>
</head>
<body>
  <h1>媒体类型示例</h1>
  <p class="screen-only">这段文字仅在屏幕显示时可见。</p>
  <p class="print-only">这段文字仅在打印时可见。</p>
  <p>这是普通段落，在屏幕和打印时都会显示。</p>
</body>
</html>

—

4. 媒体特性与条件表达式

媒体特性规则定义了应用CSS样式所需满足的设备条件。以下是一些常用的媒体特性：

媒体特性描述
width视口宽度，可使用min-width和max-width前缀
height视口高度，可使用min-height和max-height前缀
orientation设备方向（portrait或landscape）
aspect-ratio视口宽高比
hover设备是否支持悬停操作
resolution设备分辨率

4.1 宽度和高度检测

最常用的媒体特性是视口宽度和高度检测：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>宽度和高度检测示例</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      transition: background-color 0.3s;
    }

    /* 默认样式 */
    .message::before {
      content: "当前视口宽度：大于800px";
      color: green;
    }

    /* 中等屏幕 */
    @media screen and (max-width: 800px) {
      body {
        background-color: #e0f7fa;
      }
      .message::before {
        content: "当前视口宽度：601px - 800px";
        color: blue;
      }
    }

    /* 小屏幕 */
    @media screen and (max-width: 600px) {
      body {
        background-color: #fff3e0;
      }
      .message::before {
        content: "当前视口宽度：小于600px";
        color: orange;
      }
    }

    /* 超大屏幕 */
    @media screen and (min-width: 1200px) {
      body {
        background-color: #e8f5e9;
      }
      .message::before {
        content: "当前视口宽度：大于1200px";
        color: darkgreen;
      }
    }
  </style>
</head>
<body>
  <h1>视口宽度检测示例</h1>
  <div class="message"></div>
  <p>尝试调整浏览器窗口大小，观察背景颜色和文本内容的变化。</p>
</body>
</html>

4.2 设备方向检测

通过orientation媒体特性可以检测设备的朝向：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>设备方向检测示例</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      text-align: center;
    }

    .orientation-message {
      font-size: 24px;
      padding: 20px;
      border-radius: 10px;
    }

    /* 竖屏样式 */
    @media screen and (orientation: portrait) {
      .orientation-message {
        background-color: #bbdefb;
        color: #0d47a1;
      }
      .orientation-message::after {
        content: "设备处于竖屏模式";
      }
    }

    /* 横屏样式 */
    @media screen and (orientation: landscape) {
      .orientation-message {
        background-color: #c8e6c9;
        color: #1b5e20;
      }
      .orientation-message::after {
        content: "设备处于横屏模式";
      }
    }
  </style>
</head>
<body>
  <h1>设备方向检测示例</h1>
  <div class="orientation-message"></div>
  <p>在移动设备上旋转屏幕方向，或调整桌面浏览器窗口的宽高比，观察样式变化。</p>
</body>
</html>

—

5. 媒体查询逻辑操作符

媒体查询支持使用逻辑操作符来组合多个条件，包括and、逗号(,)、not和only。

5.1 逻辑与（and）操作符

使用and操作符可以组合多个条件，所有条件都必须满足：

@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* 仅在屏幕设备且宽度在768px到1024px之间时应用 */
  body {
    background-color: #f5f5f5;
  }
}

5.2 逻辑或（,）操作符

使用逗号分隔多个查询，相当于逻辑或操作，只要有一个条件满足就会应用样式：

@media screen and (max-width: 600px), screen and (orientation: portrait) {
  /* 在屏幕宽度小于600px或设备处于竖屏方向时应用 */
  .sidebar {
    display: none;
  }
}

5.3 not和only操作符

  • not关键字用于否定整个媒体查询
  • only关键字用于仅对支持媒体查询的设备应用样式
/* 非打印设备且屏幕宽度不超过1200px */
@media not print and (max-width: 1200px) {
  .container {
    max-width: 100%;
  }
}

/* 仅屏幕设备且最小宽度为768px */
@media only screen and (min-width: 768px) {
  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

以下是综合使用逻辑操作符的完整示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>媒体查询逻辑操作符示例</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      transition: all 0.3s;
    }

    .info-box {
      padding: 15px;
      margin: 10px 0;
      border-radius: 5px;
      background-color: #f5f5f5;
    }

    /* 默认样式 - 大屏幕 */
    .info-box::before {
      content: "大屏幕样式 (宽度 > 1024px)";
      font-weight: bold;
    }

    /* 中等屏幕 - 使用and操作符组合条件 */
    @media screen and (min-width: 768px) and (max-width: 1024px) {
      body {
        background-color: #e3f2fd;
      }
      .info-box {
        background-color: #bbdefb;
      }
      .info-box::before {
        content: "中等屏幕样式 (768px - 1024px) - 使用了and操作符";
      }
    }

    /* 小屏幕或横屏设备 - 使用逗号操作符实现或逻辑 */
    @media screen and (max-width: 767px), screen and (orientation: landscape) and (max-height: 500px) {
      body {
        background-color: #fce4ec;
      }
      .info-box {
        background-color: #f8bbd9;
      }
      .info-box::before {
        content: "小屏幕或横屏设备 - 使用了逗号(或)操作符";
      }
    }

    /* 非打印设备且最大宽度600px - 使用not操作符 */
    @media not print and (max-width: 600px) {
      .info-box {
        border: 2px solid #f44336;
      }
      .info-box::before {
        content: "非打印设备且小屏幕 - 使用了not操作符";
      }
    }
  </style>
</head>
<body>
  <h1>媒体查询逻辑操作符示例</h1>
  <div class="info-box"></div>
  <p>尝试调整浏览器窗口大小，观察不同条件下样式如何变化。</p>
  <p>也可以尝试打印预览查看打印样式（在打印预览中，红色边框会消失）。</p>
</body>
</html>

—

6. 断点设置技巧与实践

断点是响应式设计中的关键概念，它们决定了何时更改布局并应用新的CSS规则。选择合适的断点是创建有效响应式设计的重要步骤。

6.1 常见断点设置

虽然没有绝对标准的断点，但行业内有了一些常用断点范围：

设备类型断点范围主要用途
移动设备320px – 480px智能手机
平板设备481px – 768pxiPad和其他平板
小屏幕769px – 1024px笔记本电脑和小型显示器
大屏幕1025px – 1200px桌面显示器和大型笔记本
超大屏幕1201px及以上大桌面显示器和电视

6.2 移动优先的断点策略

移动优先是一种设计方法，先为移动设备设计样式，然后使用min-width媒体查询为更大屏幕添加样式：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>移动优先断点策略示例</title>
  <style>
    /* 基础样式 - 移动设备优先 */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 15px;
      background-color: #f9f9f9;
      line-height: 1.6;
    }

    .container {
      width: 100%;
      margin: 0 auto;
    }

    .card {
      background: white;
      padding: 15px;
      margin-bottom: 15px;
      border-radius: 5px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    /* 平板设备 - 最小宽度768px */
    @media screen and (min-width: 768px) {
      body {
        padding: 20px;
      }
      .container {
        max-width: 720px;
      }
      .card {
        padding: 20px;
        margin-bottom: 20px;
      }
    }

    /* 桌面设备 - 最小宽度1024px */
    @media screen and (min-width: 1024px) {
      body {
        padding: 30px;
      }
      .container {
        max-width: 960px;
      }
      .card {
        padding: 25px;
        margin-bottom: 25px;
      }
    }

    /* 大桌面设备 - 最小宽度1200px */
    @media screen and (min-width: 1200px) {
      .container {
        max-width: 1140px;
      }
      .card {
        padding: 30px;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>移动优先断点策略</h1>
    <div class="card">
      <h2>卡片标题</h2>
      <p>这是一个示例卡片，展示了移动优先的设计方法。</p>
    </div>
    <div class="card">
      <h2>另一个卡片</h2>
      <p>随着屏幕尺寸的增加，容器的宽度和内边距也会相应调整。</p>
    </div>
  </div>
</body>
</html>

6.3 内容断点与设备断点

除了基于设备宽度的断点，还可以基于内容创建断点，确保内容在任何尺寸下都能正确显示：

/* 基于内容的断点 */
@media screen and (min-width: 600px) {
  .navigation {
    flex-direction: row;
  }
}

/* 当文本行长度过长时调整 */
@media screen and (min-width: 700px) {
  .article {
    max-width: 700px;
    margin: 0 auto;
  }
}

—

7. 媒体查询实际应用示例

7.1 完整的响应式布局示例

以下是一个使用媒体查询实现的完整响应式网页示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>完整响应式布局示例</title>
  <style>
    /* 基础样式 - 移动设备优先 */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      line-height: 1.6;
      color: #333;
      background-color: #f4f4f4;
    }

    .container {
      width: 100%;
      margin: 0 auto;
      padding: 0 15px;
    }

    header {
      background-color: #2c3e50;
      color: white;
      padding: 1rem 0;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

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

    nav li {
      margin: 5px 0;
    }

    nav a {
      color: white;
      text-decoration: none;
      display: block;
      padding: 10px;
      border-radius: 4px;
      transition: background-color 0.3s;
    }

    nav a:hover {
      background-color: #34495e;
    }

    .main-content {
      display: flex;
      flex-direction: column;
      margin: 20px 0;
    }

    .sidebar {
      background: white;
      padding: 20px;
      border-radius: 5px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      margin-bottom: 20px;
    }

    .content {
      background: white;
      padding: 20px;
      border-radius: 5px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    .grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 15px;
      margin-top: 20px;
    }

    .grid-item {
      background: #3498db;
      color: white;
      padding: 20px;
      border-radius: 5px;
      text-align: center;
    }

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

    /* 平板设备样式 */
    @media screen and (min-width: 768px) {
      .container {
        max-width: 720px;
      }

      nav ul {
        flex-direction: row;
        justify-content: space-around;
      }

      .grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    /* 桌面设备样式 */
    @media screen and (min-width: 992px) {
      .container {
        max-width: 960px;
      }

      .main-content {
        flex-direction: row;
      }

      .sidebar {
        flex: 0 0 250px;
        margin-right: 20px;
        margin-bottom: 0;
      }

      .content {
        flex: 1;
      }

      .grid {
        grid-template-columns: 1fr 1fr 1fr;
      }
    }

    /* 大桌面设备样式 */
    @media screen and (min-width: 1200px) {
      .container {
        max-width: 1140px;
      }

      .sidebar {
        flex: 0 0 300px;
      }
    }
  </style>
</head>
<body>
  <header>
    <div class="container">
      <h1>响应式网站</h1>
      <nav>
        <ul>
          <li><a href="#">首页</a></li>
          <li><a href="#">关于我们</a></li>
          <li><a href="#">服务</a></li>
          <li><a href="#">产品</a></li>
          <li><a href="#">联系我们</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <div class="container">
    <div class="main-content">
      <aside class="sidebar">
        <h2>侧边栏</h2>
        <p>这是一个响应式侧边栏，在不同屏幕尺寸下会调整其布局。</p>
        <ul>
          <li>链接一</li>
          <li>链接二</li>
          <li>链接三</li>
        </ul>
      </aside>

      <main class="content">
        <h2>主内容区域</h2>
        <p>这是一个完整的响应式布局示例。尝试调整浏览器窗口大小，观察布局如何适应不同屏幕尺寸。</p>

        <div class="grid">
          <div class="grid-item">项目一</div>
          <div class="grid-item">项目二</div>
          <div class="grid-item">项目三</div>
        </div>
      </main>
    </div>
  </div>

  <footer>
    <div class="container">
      <p>&copy; 2023 响应式网站示例。版权所有。</p>
    </div>
  </footer>
</body>
</html>

7.2 打印样式优化示例

媒体查询不仅可以针对屏幕尺寸，还可以优化打印样式：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>打印样式优化示例</title>
  <style>
    /* 屏幕样式 */
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      color: #333;
      background-color: #f9f9f9;
      padding: 20px;
    }

    .screen-only {
      display: block;
      background: #e3f2fd;
      padding: 10px;
      margin: 10px 0;
      border-radius: 5px;
    }

    .content {
      background: white;
      padding: 20px;
      border-radius: 5px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    /* 打印样式 */
    @media print {
      body {
        background-color: white;
        color: black;
        font-size: 12pt;
        line-height: 1.4;
        padding: 0;
      }

      .screen-only {
        display: none;
      }

      .content {
        background: white;
        padding: 0;
        box-shadow: none;
      }

      a::after {
        content: " (" attr(href) ") ";
        font-size: 10pt;
        color: #666;
      }

      h1, h2, h3 {
        page-break-after: avoid;
      }

      img {
        max-width: 100% !important;
        height: auto !important;
      }

      @page {
        margin: 1cm;
      }
    }
  </style>
</head>
<body>
  <div class="screen-only">
    此内容仅在屏幕显示时可见，打印时会隐藏。
  </div>

  <div class="content">
    <h1>打印样式优化示例</h1>
    <p>这是一个展示如何优化打印样式的示例。<a href="https://example.com">这是一个示例链接</a>。</p>

    <h2>打印优化技巧</h2>
    <p>通过媒体查询，我们可以：</p>
    <ul>
      <li>隐藏不必要的内容（如导航栏、广告等）</li>
      <li>调整字体大小和颜色以提高可读性</li>
      <li>确保链接URL可见</li>
      <li>控制分页符，避免在不合适的位置分页</li>
      <li>移除背景颜色和图像以节省墨水</li>
    </ul>

    <p>尝试使用打印预览查看效果。</p>
  </div>
</body>
</html>

—

8. 媒体查询最佳实践

8.1 组织媒体查询的顺序

在CSS中，媒体查询的顺序很重要。当多个媒体查询匹配时，后定义的规则会覆盖先定义的规则（遵循CSS的层叠规则）。因此，建议按照从小到大的顺序组织媒体查询：

/* 移动设备优先 - 基础样式 */
.container {
  width: 100%;
  padding: 10px;
}

/* 平板设备 */
@media screen and (min-width: 768px) {
  .container {
    max-width: 720px;
    padding: 15px;
  }
}

/* 桌面设备 */
@media screen and (min-width: 992px) {
  .container {
    max-width: 960px;
    padding: 20px;
  }
}

/* 大桌面设备 */
@media screen and (min-width: 1200px) {
  .container {
    max-width: 1140px;
    padding: 25px;
  }
}

8.2 性能考虑

虽然媒体查询是非常有用的工具，但需要注意以下几点以确保良好性能：

  1. 将媒体查询放在CSS文件末尾：这有助于确保正确的层叠顺序
  2. 避免过于复杂的媒体查询：复杂的查询会增加浏览器处理时间
  3. 合理组织断点：不要创建过多或不必要的断点
  4. 使用min-width而不是max-width：使用移动优先的方法，从最小屏幕开始，然后逐步增强

8.3 测试策略

为确保媒体查询在各种设备上正常工作，建议：

  1. 使用浏览器开发者工具的设备模拟功能
  2. 在真实设备上进行测试
  3. 测试不同方向（横屏和竖屏）
  4. 检查打印样式

—

9. 总结

CSS媒体查询是响应式网页设计的核心技术，使开发者能够根据设备特性应用不同的CSS样式规则。本教程详细介绍了媒体查询的各个方面，包括语法结构、媒体类型、媒体特性、逻辑操作符和断点设置技巧。

知识点总结

知识点内容描述
媒体查询概念CSS3功能，允许根据设备特性应用不同样式规则
基本语法使用@media规则，包含媒体类型和条件表达式
媒体类型指定目标设备类型，如screen、print、speech等
媒体特性定义应用样式的条件，如width、height、orientation等
逻辑操作符使用and、逗号、not和only组合多个条件
断点设置根据设备尺寸设置样式变化的临界点
移动优先策略先为移动设备设计，再为更大屏幕增强体验
响应式布局使用媒体查询创建适应不同屏幕尺寸的布局
打印优化使用print媒体类型优化打印样式
最佳实践合理组织媒体查询顺序，注意性能考虑

通过掌握这些知识，开发者可以创建出在各种设备上都能提供良好用户体验的响应式网站。

, ,