[!info] related notes

• 所属 MOC: CSS MOC
• 上位主题: 网页的响应式布局（网页平板手机）
• 并列概念: CSS 尺寸单位与响应式尺寸

媒体查询

一句话定义

媒体查询是 CSS3 响应式设计的核心机制，允许根据设备特征（视口宽度、高度、方向、色彩方案等）有条件地应用不同的样式规则。

核心机制 / 工作原理

语法结构

@media 媒体类型 and (媒体特征) {
  /* 满足条件时生效的样式 */
}

完整的三部分：媒体类型 + 媒体特征 + 样式规则。

/* 媒体类型：screen / print / all（默认） */
@media screen and (min-width: 768px) {
  .sidebar { display: block; }
}

/* 可组合多个条件 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .layout { columns: 2; }
}

/* 或条件 */
@media (max-width: 600px), (orientation: portrait) {
  .nav { flex-direction: column; }
}

常用媒体特征

特征	说明	常见用法
width / min-width / max-width	视口宽度	断点布局切换
height / min-height / max-height	视口高度	高度敏感的布局
orientation	portrait / landscape	横竖屏切换
prefers-color-scheme	light / dark	暗色模式适配
prefers-reduced-motion	no-preference / reduce	无障碍动画控制
hover	hover / none	触屏设备区分
display-mode	browser / fullscreen / standalone	PWA 模式检测

移动优先策略（Mobile First）

/* 基础样式：针对小屏幕（移动设备） */
.container {
  flex-direction: column;
  padding: 8px;
}

/* 中等屏幕增强 */
@media (min-width: 768px) {
  .container {
    flex-direction: row;
    padding: 16px;
  }
}

/* 大屏幕进一步增强 */
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
    margin: 0 auto;
  }
}

min-width 从小到大 = 移动优先（渐进增强）。 max-width 从大到小 = 桌面优先（优雅降级）。

常见断点参考

/* 移动端 */     @media (min-width: 0px) { }
/* 大手机 */     @media (min-width: 480px) { }
/* 平板 */       @media (min-width: 768px) { }
/* 小桌面 */     @media (min-width: 1024px) { }
/* 大桌面 */     @media (min-width: 1200px) { }
/* 超大屏 */     @media (min-width: 1440px) { }

断点应基于内容和设计需求，而非特定设备型号。

最小例子

/* 基础：单列布局 */
.card-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 平板及以上：两列 */
@media (min-width: 768px) {
  .card-list {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .card-list > * {
    width: calc(50% - 8px);
  }
}

/* 桌面：三列 */
@media (min-width: 1024px) {
  .card-list > * {
    width: calc(33.33% - 11px);
  }
}

暗色模式适配

body {
  background: white;
  color: black;
}

@media (prefers-color-scheme: dark) {
  body {
    background: #1a1a1a;
    color: #e0e0e0;
  }
}

与容器查询的对比

维度	媒体查询	容器查询
查询对象	视口 / 设备特征	父容器尺寸
作用范围	全局	组件级别
浏览器支持	全面支持	较新（2023+）
适用场景	页面级布局切换	组件在不同容器中的自适应
语法	@media	@container

容器查询是媒体查询的补充，不是替代。两者通常配合使用。

边界与常见误解

• 误解：媒体查询就是响应式的全部。 响应式设计还包括流式布局、弹性图片、相对单位等，媒体查询只是条件分支。
• 误解：断点应该对应特定设备。 断点应基于设计稿的内容断点，而非 iPhone/iPad 的具体像素。
• 误解：@media 只能写在 CSS 文件顶层。 它也可以嵌套在 CSS 预处理器和 @layer 中。
• 边界：媒体查询不能查询 JS 状态。 如果需要根据 JS 状态切换样式，应使用 CSS 类名或 CSS 变量。
• 边界：打印样式 使用 @media print 可以定义打印时的专用样式。

最短记忆方式

媒体查询是响应式的条件开关（@media + 条件），不是响应式本身的全部。移动优先用 min-width，桌面优先用 max-width。