媒体查询

概念：媒体查询

媒体查询是 CSS3 的功能，允许根据设备特性（如视口宽度、高度、方向等）有条件地应用样式，实现响应式设计。

解决的问题：针对不同设备应用不同样式

---

核心命题

• 语法结构

  @media media-type and (media-feature) { ... }

• 媒体类型
  • screen - 屏幕设备
  • print - 打印设备
  • speech - 屏幕阅读器
  • all - 所有设备
• 媒体特性
  • width / height - 视口宽高
  • min-width / max-width - 最小/最大视口宽度
  • orientation - 方向（portrait/landscape）
  • aspect-ratio - 宽高比

---

运行机制

flowchart TB
    A[CSS解析] --> B{@media 查询?}
    B -->|匹配| C[应用样式]
    B -->|不匹配| D[跳过]
    C --> E[渲染]

---

常见用法

1. 断点媒体查询

/* 移动端 */
@media (max-width: 575px) {
  .container { width: 100%; }
}
 
/* 平板 */
@media (min-width: 576px) and (max-width: 991px) {
  .container { width: 540px; }
}
 
/* 桌面 */
@media (min-width: 992px) {
  .container { width: 960px; }
}

2. 方向检测

/* 横屏 */
@media (orientation: landscape) {
  .sidebar { display: none; }
}
 
/* 竖屏 */
@media (orientation: portrait) {
  .sidebar { display: block; }
}

3. 视网膜屏幕

/* DPR > 2 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .logo { background-image: url(logo@2x.png); }
}

4. 导入语句方式

<!-- 在 HTML 中导入 -->
<link rel="stylesheet" media="(max-width: 768px)" href="mobile.css">

---

与响应式布局的关系

• 媒体查询是响应式布局的核心技术
• 响应式布局 = 弹性布局 + 弹性单位 + 媒体查询

---

知识图谱

• 父级概念：CSS
• 关联概念：
  • 响应式布局 — 媒体查询的应用场景
  • CSS盒模型 — 布局基础

---

参考延伸

• MDN: Using media queries
• CSS Tricks: Media Queries for Standard Devices