CSS3 多媒体查询实例（实战指南）

CSS3 多媒体查询实例：让网页“看懂”你的设备

在移动互联网时代，我们每天用手机、平板、笔记本、大屏电视访问网页的场景已经司空见惯。你有没有想过，为什么同一个网页在手机上看起来舒服，在电脑上却显得拥挤或空旷？这背后，离不开一个强大的 CSS 技术——多媒体查询（Media Queries）。

CSS3 多媒体查询实例，正是实现响应式设计的核心工具。它能让网页“感知”当前设备的特性，比如屏幕宽度、分辨率、方向、甚至设备类型。简单来说，它就像给网页装上了一双“眼睛”，能根据环境自动调整布局和样式。

如果你是初学者，别担心。这篇文章不会堆砌术语，而是通过一个个真实的 CSS3 多媒体查询实例，带你一步步理解它的原理与用法。即便你只接触过 HTML 和基础 CSS，也能轻松上手。

什么是多媒体查询？它如何工作？

多媒体查询的核心语法是 @media 规则，它允许我们为不同的设备条件定义不同的 CSS 样式。

想象一下，你设计了一张海报。你希望它在手机上是竖版展示，在平板上是横版展开，在大屏幕上则完整呈现。多媒体查询，就是你给这张海报写下的“适配说明”。

/* 基本语法结构 */
@media (max-width: 768px) {
  /* 当屏幕宽度小于或等于 768px 时，应用以下样式 */
  body {
    font-size: 14px;
    padding: 10px;
  }
}

这里的 (max-width: 768px) 就是一个“查询条件”，意思是“如果屏幕最大宽度不超过 768 像素，就执行里面的样式”。

💡 小贴士：768px 是平板电脑的常见分界线，常被用作移动端与桌面端的分界点。

常见查询类型：从宽度到方向

在实际开发中，最常用的是基于屏幕尺寸和方向的查询。我们来通过几个经典实例，逐一拆解。

屏幕宽度查询：实现响应式布局

最常见的需求是根据屏幕宽度调整布局。比如，手机上用单列，电脑上用双列。

/* 当屏幕宽度小于 600px 时，使用单列布局 */
@media (max-width: 600px) {
  .container {
    display: flex;
    flex-direction: column; /* 垂直排列 */
  }

  .sidebar {
    width: 100%; /* 占满整个宽度 */
    margin-bottom: 15px;
  }

  .main-content {
    width: 100%;
  }
}

/* 当屏幕宽度大于 600px 时，使用双列布局 */
@media (min-width: 601px) {
  .container {
    display: flex;
    flex-direction: row; /* 水平排列 */
  }

  .sidebar {
    width: 250px;
    background-color: #f0f0f0;
  }

  .main-content {
    flex: 1;
    padding: 20px;
  }
}

✅ 注释说明：

  • max-width: 600px：表示“屏幕最大宽度为 600px”，适用于手机或小屏设备。
  • min-width: 601px：表示“屏幕最小宽度为 601px”，适用于平板或桌面。
  • 使用 flex 布局，让结构更灵活，适配性强。

设备方向查询：横屏与竖屏自适应

你有没有发现，有些网页在手机旋转时，布局会自动调整？这就是方向查询的功劳。

/* 竖屏模式下的样式 */
@media (orientation: portrait) {
  .header {
    height: 80px;
    font-size: 18px;
  }

  .hero-image {
    width: 100%;
    height: 200px;
  }
}

/* 横屏模式下的样式 */
@media (orientation: landscape) {
  .header {
    height: 60px;
    font-size: 16px;
  }

  .hero-image {
    width: 300px;
    height: 150px;
    float: right;
  }
}

✅ 注释说明：

  • orientation: portrait：竖屏模式，屏幕高度大于宽度。
  • orientation: landscape：横屏模式，屏幕宽度大于高度。
  • 通过改变图片位置和字体大小，提升横屏下的视觉体验。

分辨率与像素密度查询：适配高分辨率屏幕

高像素密度屏幕（如 Retina 屏）能显示更清晰的图像。但默认的图片在这些屏幕上会模糊。我们可以通过 resolution 查询来提供高清图。

/* 仅在高分辨率屏幕（2x 及以上）下加载高清图 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .logo {
    background-image: url('logo@2x.png');
    background-size: contain;
    background-repeat: no-repeat;
  }
}

/* 3x 高清图适配 */
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
  .logo {
    background-image: url('logo@3x.png');
  }
}

✅ 注释说明：

  • min-resolution: 192dpi：表示最小分辨率为 192 像素每英寸。
  • @2x 和 @3x 是常见的高清图命名规范，前端资源中常见。
  • 这种方式能有效节省移动端流量，避免低配设备加载过大图片。

实战案例：一个完整的响应式导航栏

我们来做一个真实可用的 CSS3 多媒体查询实例：一个在不同设备上自动切换的导航栏。

<nav class="navbar">
  <div class="nav-logo">MySite</div>
  <ul class="nav-menu">
    <li><a href="#home">首页</a></li>
    <li><a href="#about">关于</a></li>
    <li><a href="#services">服务</a></li>
    <li><a href="#contact">联系</a></li>
  </ul>
  <div class="nav-toggle">☰</div>
</nav>

/* 默认样式：桌面端布局 */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  color: white;
  padding: 15px 30px;
  font-family: Arial, sans-serif;
}

.nav-menu {
  display: flex;
  list-style: none;
  gap: 30px;
}

.nav-menu a {
  color: white;
  text-decoration: none;
  font-size: 16px;
}

.nav-toggle {
  display: none; /* 初始隐藏 */
  font-size: 24px;
  cursor: pointer;
}

/* 手机端：隐藏菜单，显示切换按钮 */
@media (max-width: 768px) {
  .nav-menu {
    display: none; /* 默认不显示 */
    flex-direction: column;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background-color: #444;
    padding: 10px 0;
    text-align: center;
  }

  .nav-menu.active {
    display: flex; /* 点击后显示 */
  }

  .nav-toggle {
    display: block; /* 显示按钮 */
  }
}

/* 可选：添加动画效果 */
@media (max-width: 768px) {
  .nav-menu {
    transition: transform 0.3s ease;
  }

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

  .nav-menu:not(.active) {
    transform: translateY(-100%);
  }
}

✅ 注释说明：

  • display: none 与 active 类结合，实现“点击展开”功能。
  • transition 动画让菜单滑动更自然。
  • 这种设计是移动端导航栏的标准模式，兼容性好。

多条件组合查询：更精准的控制

有时，我们需要同时满足多个条件。CSS3 支持逻辑组合：and、or（用逗号）、not。

/* 同时满足：宽度大于 600px 且为横屏 */
@media (min-width: 600px) and (orientation: landscape) {
  .hero-section {
    flex-direction: row;
    gap: 30px;
  }
}

/* 宽度小于 600px 或为竖屏 */
@media (max-width: 600px), (orientation: portrait) {
  .hero-section {
    flex-direction: column;
    text-align: center;
  }
}

/* 排除高分辨率设备的某些样式 */
@media not (min-resolution: 192dpi) {
  .image-grid img {
    filter: brightness(0.9); /* 低分辨率下略暗一点 */
  }
}

✅ 注释说明：

  • and：必须同时满足两个条件。
  • 逗号（,）：表示“或”的关系，任一满足即可。
  • not：排除特定条件，常用于降级处理。

最佳实践与常见误区

在使用 CSS3 多媒体查询实例时，有几个关键点需要特别注意：

实践建议 说明
从移动优先开始 先写 max-width 的查询，再逐步扩展到大屏，更符合现代响应式开发趋势。
使用语义化类名 如 .nav-mobile 而非 .media-1，提升可读性。
避免过度嵌套 保持 CSS 结构简洁，不要在一个查询里写几十行样式。
测试真实设备 模拟器无法完全替代真机测试，尤其是触摸交互和性能表现。

⚠️ 常见错误：误将 min-width 写成 max-width，导致样式未生效。建议在开发时用浏览器开发者工具的“设备模拟器”快速验证。

总结：让网页真正“懂你”

CSS3 多媒体查询实例，不是一句口号，而是现代网页开发的基石。它让网页不再“千篇一律”，而是能根据用户所处的环境，自动调整外观与交互。

从屏幕宽度到方向，从分辨率到设备类型，每一条查询规则，都是为了让用户体验更流畅、更自然。掌握这些技巧，你不仅能做出“好看的页面”，更能做出“智能的页面”。

无论你是正在学习前端的新手，还是已有经验的开发者，建议将多媒体查询融入每一个项目。它不会让你立刻成为专家，但一定会让你的代码更专业、更优雅。

别再让网页“盲目显示”了。用 CSS3 多媒体查询实例，让它真正“看懂”你的设备，听见你的需求。