# 布局与响应式设计-第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)
布局与响应式设计-第13章-13.2-媒体查询(@media)
2 分钟阅读
204 字
如果文章对您有帮助,欢迎支持作者继续创作