以下关于CSS媒体查询（`@media`）的描述，正确的是？

@media的主要用法：

1.基本语法

@media mediatype and (media feature) {
    /* 符合条件时应用的 CSS 代码 */
    selector {
        property: value;
    }
}

2.媒体类型

最常见的类型，指定设备的大类：
• all：所有设备（默认值）。
• screen：电脑屏幕、平板电脑、智能手机等（最常用）。
• print：打印预览模式或打印文档。
• speech：屏幕阅读器等发声设备。

/* 仅在屏幕设备上应用 */
@media screen {
    body { font-size: 16px; }
}

/* 仅在打印时应用（例如隐藏导航栏） */
@media print {
    .no-print { display: none; }
}

3.逻辑操作符

/* AND: 屏幕宽度在 600px 到 900px 之间 */
@media screen and (min-width: 600px) and (max-width: 900px) {
    .box { background: yellow; }
}

/*&nbs***bsp;屏幕宽度小于 500px 或 大于 1000px */
@media (max-width: 500px), (min-width: 1000px) {
    .box { display: none; }
}

/* NOT: 非打印设备 */
@media not print {
    body { background: #eee; }
}

4.常用媒体特性

这是媒体查询的核心，用于检测设备的具体特征。
A. 视口尺寸
• width / height：视口宽高。
• min-width / max-width：最小/最大宽度（最常用）。
• min-height / max-height：最小/最大高度。
B. 屏幕方向
• orientation: portrait：竖屏（高度大于或等于宽度）。
• orientation: landscape：横屏（宽度大于高度）。
C. 分辨率与像素比
• resolution：设备的分辨率。
• -webkit-device-pixel-ratio / resolution：检测 Retina 屏幕等高清屏。
D. 用户偏好 —— 现代浏览器新特性
• prefers-color-scheme：检测用户系统是深色模式还是浅色模式。
• prefers-reduced-motion：检测用户是否开启了“减少动画”设置（无障碍访问）。

场景一：响应式布局（移动端优先 vs PC端优先）
移动端优先（推荐）： 默认样式给手机，通过 min-width 逐步增强给大屏。

/* 默认样式（手机） */
.container { width: 100%; }

/* 平板 (宽度 >= 768px) */
@media (min-width: 768px) {
    .container { width: 750px; margin: 0 auto; }
}

/* 桌面 (宽度 >= 1024px) */
@media (min-width: 1024px) {
    .container { width: 980px; }
}

场景二：适配深色模式
这是目前非常流行的用法，可以根据系统设置自动切换网站主题。

:root {
    --bg-color: #ffffff;
    --text-color: #333333;
}

/* 当用户系统开启深色模式时 */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #1a1a1a;
        --text-color: #f0f0f0;
    }
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

场景三：适配横竖屏

/* 竖屏时 */
@media (orientation: portrait) {
    .ad-banner { display: none; } /* 竖屏空间小，隐藏广告 */
}

/* 横屏时 */
@media (orientation: landscape) {
    .video-player { width: 80%; }
}

场景四：适配 Retina 高清屏
针对 2倍或 3倍屏加载更高清的图片。

/* 普通 1倍屏 */
.logo {
    background-image: url('logo.png');
}

/* 2倍屏 (如 Mac Retina) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo {
        background-image: url(**********');
    }
}

场景五：无障碍访问（减少动画）
尊重用户的系统设置，避免让前庭功能障碍的用户感到眩晕。

.animated-element {
    animation: bounce 2s infinite;
}

/* 如果用户设置了“减少动态效果”，则关闭动画 */
@media (prefers-reduced-motion: reduce) {
    .animated-element {
        animation: none;
        transition: none;
    }
}

总结
@media 的核心在于**“条件判断”**。
1. 做响应式布局：牢记 min-width（移动优先）和 max-width（PC优先）的区别。
2. 做用户体验优化：利用 prefers-color-scheme 和 prefers-reduced-motion 等特性，让网站更智能、更人性化。