CSS 媒体查询深入

学习@media使用 · 难度：进阶 · +15XP

CSS 媒体查询深入

媒体查询（Media Queries）是响应式设计的基石，允许根据设备特性（屏幕宽度、分辨率、方向、颜色模式等）应用不同的 CSS 样式。掌握媒体查询是成为前端开发者的核心能力。

基本语法

@media 媒体类型 and (媒体特性) {
  /* CSS 规则 */
}

常用媒体类型

类型	说明
all	所有设备（默认）
screen	屏幕设备（电脑、手机、平板）
print	打印预览和打印时
speech	屏幕阅读器

常用媒体特性

特性	说明	示例
width / min-width / max-width	视口宽度	(max-width: 768px)
height / min-height / max-height	视口高度	(min-height: 600px)
orientation	屏幕方向	(orientation: landscape)
aspect-ratio	宽高比	(min-aspect-ratio: 16/9)
resolution	像素密度	(min-resolution: 2dppx)
prefers-color-scheme	颜色方案偏好	(prefers-color-scheme: dark)
prefers-reduced-motion	减少动画偏好	(prefers-reduced-motion: reduce)
prefers-contrast	对比度偏好	(prefers-contrast: high)
hover	是否支持悬停	(hover: hover)
pointer	指点设备精度	(pointer: coarse)

经典断点（Mobile First）

/* 基础样式 — 移动端优先 */
body { font-size: 16px; }
/* 平板 */
@media (min-width: 768px) {
  body { font-size: 18px; }
}
/* 桌面 */
@media (min-width: 1024px) {
  body { font-size: 20px; }
}
/* 大屏 */
@media (min-width: 1440px) {
  body { font-size: 22px; }
}

复杂组合查询

/* AND — 同时满足 */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  /* 仅平板设备 */
}
/* OR — 逗号分隔 */
@media (max-width: 600px), (orientation: portrait) {
  /* 窄屏或竖屏 */
}
/* NOT — 排除 */
@media not screen and (max-width: 600px) {
  /* 除窄屏外的所有屏幕设备 */
}

暗色模式适配

:root {
  --bg: #ffffff;
  --text: #333333;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a2e;
    --text: #e0e0e0;
  }
}
body {
  background: var(--bg);
  color: var(--text);
}

减少动画

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

打印样式

@media print {
  nav, .sidebar, .ads, .no-print {
    display: none;
  }
  body {
    font-size: 12pt;
    line-height: 1.5;
  }
  a::after {
    content: " (" attr(href) ") ";
    font-size: 0.8em;
  }
}

触摸设备适配

/* 触摸设备 — 增大点击区域 */
@media (hover: none) and (pointer: coarse) {
  button, a.btn {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 20px;
  }
}

Container Queries vs Media Queries

媒体查询基于视口，而容器查询基于父容器。对于组件级响应式，容器查询更灵活：

/* 媒体查询 — 视口级 */
@media (min-width: 768px) { .card { ... } }
/* 容器查询 — 组件级 */
@container (min-width: 400px) { .card { ... } }

媒体查询是每个前端开发者必须熟练掌握的核心技术。随着 Container Queries 的普及，媒体查询和容器查询配合使用将成为响应式设计的最佳实践。