媒体查询（Media Queries） 是 CSS3 中的一项核心技术，它允许开发者根据设备的特性（如屏幕宽度、高度、分辨率、方向、颜色等）来有条件地应用 CSS 样式。
它是实现响应式设计（Responsive Design） 的基石，使网页能够适配手机、平板、桌面等多种设备。
一、媒体查询的基本语法
@media media-type and (media-feature) {
/* 满足条件时应用的样式 */
}1. media-type（媒体类型，可选）
定义样式适用的设备类型：
all：所有设备（默认）screen：屏幕设备（电脑、手机、平板）print：打印设备speech：屏幕阅读器
🔹 现代开发中通常省略
media-type，默认为screen。
2. media-feature（媒体特性）
描述设备的特征，是媒体查询的核心。常用特性包括：
| 特性 | 说明 | 示例 |
|---|---|---|
width | 视口宽度 | (min-width: 768px) |
height | 视口高度 | (max-height: 600px) |
device-width | 设备屏幕宽度（不推荐） | (device-width: 375px) |
orientation | 屏幕方向 | (orientation: portrait) |
aspect-ratio | 宽高比 | (aspect-ratio: 16/9) |
resolution | 分辨率（DPI） | (min-resolution: 2dppx) |
hover | 是否支持悬停（如鼠标） | (hover: hover) |
prefers-color-scheme | 用户偏好主题 | (prefers-color-scheme: dark) |
prefers-reduced-motion | 用户是否偏好减少动画 | (prefers-reduced-motion: reduce) |
二、常用写法示例
✅ 1. 移动优先（Mobile-First）—— 推荐 ✅
先写移动端样式，再用 min-width 为大屏设备增强。
/* 默认：移动端样式 */
.container {
padding: 10px;
}
/* 平板及以上 */
@media (min-width: 768px) {
.container {
padding: 20px;
}
}
/* 桌面端 */
@media (min-width: 1024px) {
.container {
padding: 40px;
}
}✅ 2. 桌面优先（Desktop-First）
先写桌面样式，再用 max-width 为小屏设备适配。
.container {
padding: 40px;
}
@media (max-width: 1023px) {
.container {
padding: 20px;
}
}
@media (max-width: 767px) {
.container {
padding: 10px;
}
}🔹 推荐移动优先：更符合现代用户习惯，有利于性能优化（小屏设备加载更少样式）。
✅ 3. 多条件组合
使用 and、or（逗号）、not 组合多个条件。
/* 同时满足：屏幕 + 宽度 >= 768px + 横屏 */
@media screen and (min-width: 768px) and (orientation: landscape) {
.sidebar {
display: block;
}
}
/* 满足任一条件 */
@media (max-width: 480px), (max-height: 320px) {
.header {
font-size: 14px;
}
}
/* 否定条件 */
@media not print and (min-width: 800px) {
/* 非打印设备且宽度 >= 800px 时生效 */
}三、实际应用场景（面试加分点）
| 场景 | 媒体查询示例 |
|---|---|
| 响应式布局 | 栅格系统切换（单列 → 多列） |
| 字体适配 | 小屏用小字体，大屏用大字体 |
| 隐藏/显示元素 | 手机端隐藏侧边栏，桌面端显示 |
| 图片适配 | 不同分辨率加载不同尺寸图片（配合 srcset） |
| 主题切换 | (prefers-color-scheme: dark) 实现暗黑模式 |
| 可访问性 | (prefers-reduced-motion: reduce) 关闭动画 |
| 横竖屏适配 | (orientation: portrait) 调整布局 |
四、最佳实践与注意事项
✅ 1. 使用 min-width 而非 device-width
- ❌ 避免：
(device-width: 375px)—— 依赖具体设备，不灵活 - ✅ 推荐：
(min-width: 320px)—— 基于视口，更通用
✅ 2. 设置视口元标签（Viewport Meta Tag）
<meta name="viewport" content="width=device-width, initial-scale=1.0">🔹 必须设置，否则媒体查询在移动端可能不生效。
✅ 3. 合理设置断点（Breakpoints）
常见断点参考：
- 手机：
< 768px - 平板：
768px ~ 1023px - 桌面：
≥ 1024px
🔹 断点应基于内容而非设备，内容撑不开时才换行。
✅ 4. 避免过度使用媒体查询
- 优先使用 Flexbox、Grid 等弹性布局
- 媒体查询是“补丁”，不是“主菜”
五、现代替代方案（了解即可）
| 方案 | 说明 |
|---|---|
| Container Queries | 基于容器尺寸而非视口，实现组件级响应式（现代浏览器支持） |
| CSS 自定义属性 + JS | 动态控制响应式行为 |
| Utility-First CSS（如 Tailwind） | 使用 sm:、md:、lg: 前缀直接在 HTML 中写响应式类 |
💬 一句话总结：
“媒体查询是响应式设计的核心，通过
@media规则根据设备特性（如宽度、方向、用户偏好）动态应用样式，实现‘一套代码，多端适配’。推荐采用移动优先策略，结合视口标签和弹性布局，打造高性能、可访问的用户体验。”
在面试中，能结合移动优先、暗黑模式、可访问性等高级场景说明，会显得你不仅会用，更理解其设计哲学。
THE END
