CSS 媒体查询是响应式网页设计的核心技术。它允许你根据设备的特性（如屏幕宽度、高度、分辨率、方向等）来应用不同的CSS样式。@media 规则可以检测视口宽度、设备类型、用户偏好等多种条件，当条件满足时，内部的CSS规则就会生效。

基本语法：@media [媒体类型] and (媒体特性: 值) { /* CSS规则 */ }

min-width（最小宽度）：当视口宽度 大于或等于 指定值时生效。常用于"移动优先"策略，从小到大逐步增强布局。例如 (min-width: 768px) 表示屏幕宽度 ≥768px 时应用样式。

max-width（最大宽度）：当视口宽度 小于或等于 指定值时生效。常用于限定某样式仅在较小屏幕上应用。例如 (max-width: 767px) 表示屏幕宽度 ≤767px 时应用样式。

两者可以组合使用来创建区间范围，如 (min-width: 768px) and (max-width: 1024px) 精确匹配平板设备。

and（与）：所有条件必须同时满足。例如 @media screen and (min-width: 768px) and (max-width: 1024px) 要求设备既是屏幕、宽度又在768-1024px之间。

逗号 ,（或）：任意一个条件满足即可。逗号分隔的多个媒体查询是独立的，相当于"或"的关系。例如 @media screen and (max-width: 480px), screen and (min-width: 1400px) 匹配小屏手机或大屏显示器。

在本工具中，条件之间的 AND 连接符生成紧凑的联合条件，OR 连接符则生成逗号分隔的独立查询。

以下是业界广泛使用的断点参考（与 Bootstrap 5 对齐）：

prefers-color-scheme 用于检测用户操作系统的主题偏好（亮色/暗色模式）。这是实现网站暗黑模式的关键媒体特性。

取值：light（用户偏好亮色主题）、dark（用户偏好暗色主题）。

示例：@media (prefers-color-scheme: dark) { body { background: #1a1a1a; color: #eee; } }

现代浏览器均支持此特性，建议结合CSS自定义属性（变量）来实现完整的主题切换方案。

使用 resolution 或 min-resolution 特性来检测设备像素密度：

常见用法：

• @media (min-resolution: 2dppx) — 匹配2倍像素密度（如Retina屏）
• @media (min-resolution: 192dpi) — 匹配高DPI屏幕
• @media (-webkit-min-device-pixel-ratio: 2) — Safari兼容写法

通常用于加载高清图片或调整图标清晰度。建议同时使用多种单位写法确保兼容性。

orientation 检测设备的屏幕方向：

portrait（竖屏）：视口高度 ≥ 宽度。

landscape（横屏）：视口宽度 > 高度。

这对于平板和手机特别有用。例如在横屏时显示更多列，竖屏时堆叠布局：@media (orientation: landscape) { .grid { grid-template-columns: repeat(3, 1fr); } }

媒体查询在CSS中的位置会影响样式的优先级。有两种主流组织方式：

1. 集中放置（推荐）：将所有媒体查询放在CSS文件末尾。这种"移动优先"策略先定义基础样式（小屏），然后逐步用媒体查询覆盖为大屏样式。优点是代码清晰、易于维护。

2. 分散放置：将媒体查询紧跟在相关组件样式后面。优点是组件逻辑内聚，适合模块化开发。

无论哪种方式，注意CSS的层叠规则：相同选择器下，后出现的规则会覆盖先出现的规则。

@media print 用于定义打印时的样式，可以隐藏不需要的元素（如导航栏、广告、侧边栏），调整字体大小、颜色（通常改为黑白色），优化页面布局以适应纸张。

实用示例：

@media print {
  nav, .sidebar, .ad-banner { display: none !important; }
  body { font-size: 12pt; color: #000; background: #fff; }
  a[href]::after { content: " (" attr(href) ")"; }
}

prefers-reduced-motion 检测用户是否在系统层面开启了"减少动画"选项。这是WCAG无障碍标准的重要实践。

取值：no-preference（无特殊偏好）、reduce（用户希望减少动画）。

建议用法：为所有动画和过渡效果提供一个减弱版本，当用户开启了减少动画时，禁用或简化动画效果，以帮助前庭功能障碍患者舒适地浏览网页。

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