# 布局与响应式设计-第13章-13.2-媒体查询（@media） ## 学习目标 - 掌握`@media`规则的基本语法和使用场景 - 理解移动优先与桌面优先的断点设计策略 - 能够使用媒体查询实现多设备适配的响应式布局 ## 概念讲解 媒体查询（Media Queries）是CSS3引入的核心响应式技术，它允许根据设备特性（如屏幕宽度、分辨率、设备类型等）动态应用不同的CSS样式规则。通过媒体查询，开发者可以实现“一次开发，多端适配”，避免为不同设备编写多个独立样式表。 **核心价值**： - **设备感知**：识别设备屏幕尺寸、方向、分辨率等特性 - **条件样式**：当满足特定条件时才应用样式规则 - **渐进增强**：从基础样式开始，逐步为大屏幕设备添加高级样式 媒体查询的工作原理类似于“if条件判断”，当设备满足查询条件时，对应的CSS代码块将被激活。 ## 语法参考 ### 基础语法结构 ```css /* @media 媒体类型 and (媒体特性) { 样式规则 } */ @media screen and (max-width: 768px) { /* 当屏幕宽度 ≤768px 时应用的样式 */ .container { padding: 0 10px; } } ``` ### 媒体类型（可选） | 类型 | 描述 | 常用场景 | |------------|-------------------------------|---------------------------| | `screen` | 彩色屏幕设备（默认值） | 手机、平板、桌面显示器 | | `print` | 打印预览模式 | 打印样式优化 | | `speech` | 屏幕阅读器等语音合成设备 | 无障碍访问优化 | | `all` | 匹配所有设备类型 | 通用规则定义 | ### 媒体特性（核心条件） | 特性语法 | 描述 | 示例取值 | |---------------------------|-------------------------------|---------------------------| | `width`/`max-width`/`min-width` | 视口宽度（最常用） | `600px`、`1024px` | | `height`/`max-height`/`min-height` | 视口高度 | `400px`、`800px` | | `orientation` | 屏幕方向 | `portrait`（竖屏）、`landscape`（横屏） | | `resolution` | 屏幕分辨率 | `300dpi`、`2dppx` | | `aspect-ratio` | 视口宽高比 | `16/9`、`4/3` | ### 逻辑操作符 - `and`：同时满足多个条件 ```css @media screen and (min-width: 768px) and (max-width: 1024px) { ... } ``` - `or`（`,`分隔）：满足任一条件 ```css @media (max-width: 768px), (orientation: portrait) { ... } ``` - `not`：否定条件（仅对整个查询生效） ```css @media not print and (max-width: 1200px) { ... } ``` ## 实战示例 ### 示例1：基础断点设计（移动优先） ```css /* 基础样式（默认移动设备 <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：结合设备方向的适配 ```css /* 横屏模式优化 */ @media (orientation: landscape) { .hero-section { flex-direction: row; /* 横屏时水平排列 */ height: 50vh; /* 限制高度 */ } } /* 竖屏模式优化 */ @media (orientation: portrait) { .hero-section { flex-direction: column; /* 竖屏时垂直排列 */ height: auto; /* 自适应高度 */ } } ``` ### 示例3：高清屏幕适配（Retina屏） ```css /* 2倍分辨率屏幕 */ @media (min-resolution: 2dppx) { .logo { background-image: url(logo@2x.png); /* 使用高清图片 */ background-size: 100px 50px; /* 保持原始尺寸 */ } } ``` ## 注意事项 ### 1. 断点设计最佳实践 - **移动优先**：先编写移动端基础样式，再用`min-width`向大屏幕扩展（推荐） - **常用断点参考**： ```css /* 移动端 */ @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）