布局与响应式设计-第13章-13.2-媒体查询（@media）

学习目标

• 掌握@media规则的基本语法和使用场景
• 理解移动优先与桌面优先的断点设计策略
• 能够使用媒体查询实现多设备适配的响应式布局

概念讲解

媒体查询（Media Queries）是CSS3引入的核心响应式技术，它允许根据设备特性（如屏幕宽度、分辨率、设备类型等）动态应用不同的CSS样式规则。通过媒体查询，开发者可以实现“一次开发，多端适配”，避免为不同设备编写多个独立样式表。

核心价值：

• 设备感知：识别设备屏幕尺寸、方向、分辨率等特性
• 条件样式：当满足特定条件时才应用样式规则
• 渐进增强：从基础样式开始，逐步为大屏幕设备添加高级样式

媒体查询的工作原理类似于“if条件判断”，当设备满足查询条件时，对应的CSS代码块将被激活。

语法参考

基础语法结构

/* @media 媒体类型 and (媒体特性) { 样式规则 } */
@media screen and (max-width: 768px) {
  /* 当屏幕宽度 ≤768px 时应用的样式 */
  .container {
    padding: 0 10px;
  }
}

媒体类型（可选）

媒体特性（核心条件）

逻辑操作符

• and：同时满足多个条件

  @media screen and (min-width: 768px) and (max-width: 1024px) { ... }

• or（,分隔）：满足任一条件

  @media (max-width: 768px), (orientation: portrait) { ... }

• not：否定条件（仅对整个查询生效）

  @media not print and (max-width: 1200px) { ... }

实战示例

示例1：基础断点设计（移动优先）

/* 基础样式（默认移动设备 <768px） */
.container {
  width: 100%;
  padding: 0 15px;
}

.nav-menu {
  display: none; /* 移动端隐藏导航菜单 */
}

/* 平板设备（768px ≤ 宽度 <1024px） */
@media (min-width: 768px) {
  .container {
    max-width: 720px;
    margin: 0 auto;
  }

  .nav-menu {
    display: flex; /* 平板显示导航菜单 */
  }
}

/* 桌面设备（宽度 ≥1024px） */
@media (min-width: 1024px) {
  .container {
    max-width: 960px;
  }

  .featured-content {
    display: grid;
    grid-template-columns: 2fr 1fr; /* 桌面端双列布局 */
  }
}

示例2：结合设备方向的适配

/* 横屏模式优化 */
@media (orientation: landscape) {
  .hero-section {
    flex-direction: row; /* 横屏时水平排列 */
    height: 50vh; /* 限制高度 */
  }
}

/* 竖屏模式优化 */
@media (orientation: portrait) {
  .hero-section {
    flex-direction: column; /* 竖屏时垂直排列 */
    height: auto; /* 自适应高度 */
  }
}

示例3：高清屏幕适配（Retina屏）

/* 2倍分辨率屏幕 */
@media (min-resolution: 2dppx) {
  .logo {
    background-image: url(logo@2x.png); /* 使用高清图片 */
    background-size: 100px 50px; /* 保持原始尺寸 */
  }
}

注意事项

1. 断点设计最佳实践

• 移动优先：先编写移动端基础样式，再用min-width向大屏幕扩展（推荐）
• 常用断点参考：

  /* 移动端 */
  @media (min-width: 576px) { ... } /* 小屏手机 */
  @media (min-width: 768px) { ... } /* 平板 */
  @media (min-width: 992px) { ... } /* 小屏桌面 */
  @media (min-width: 1200px) { ... } /* 大屏桌面 */

2. 性能优化

• 避免过度嵌套：媒体查询内部样式尽量保持简洁
• 合并相同条件：多个样式规则可合并到同一媒体查询
• 使用not减少冗余：排除特定设备类型时使用

3. 常见误区

• ❌ 错误：同时使用min-width和max-width时范围重叠
  ✅ 正确：断点区间应连续且无重叠（如768px-1023px和1024px+）

• ❌ 错误：依赖设备特定尺寸（如iPhone宽度）
  ✅ 正确：基于内容断点（内容需要调整时才添加媒体查询）

自测题

1. 以下哪个媒体查询表示“屏幕宽度大于等于768px且小于1024px”？
   A. @media (width: 768px and 1024px)
   B. @media (min-width:768px) and (max-width:1023px)
   C. @media (min-width:768px), (max-width:1023px)

2. 移动优先设计与桌面优先设计的主要区别是什么？如何通过媒体查询实现移动优先？

3. 编写媒体查询实现：当屏幕宽度小于480px时，导航栏变为垂直排列，字体大小减小为14px。

（答案见附录C）