media属性值必须是完整、语法正确的媒体查询表达式，如(min-width: 768px)，仅在<source>中生效且需配合<picture>使用，浏览器按顺序匹配首个满足条件的<source>，不匹配则回退至<img>的src。
media属性值怎么写才生效
不加引号、不写括号、不能用 CSS 选择器语法——media 属性只接受媒体查询表达式（Media Query），比如 screen and (min-width: 768px)，不是 screen and min-width: 768px（缺括号）或 @media screen...（带 CSS 规则前缀）。
常见错误现象：资源始终加载、响应式切换失效、控制台无报错但行为不符合预期。
-
media值必须是完整、语法正确的媒体查询，支持screen、print、all，也支持hover、prefers-color-scheme等现代特性 - 多个条件用
and连接；用,表示“或”关系（如(max-width: 480px), (max-device-width: 480px)） - 不要在 HTML 中写
!important或其他 CSS 修饰符——它不识别
img[srcset] + media 配合 picture 时的典型用法
单独给 <img> 写 media 没用——media 属性只在 <source> 元素中起作用，且必须配合 <picture> 容器。
正确结构是：<picture> 包裹多个 <source>（各带 srcset 和 media），最后跟一个兜底 <img>（含 src 和 alt）。
<picture> <source srcset="hero-desktop.webp" media="(min-width: 1024px)"> <source srcset="hero-tablet.webp" media="(min-width: 768px)"> <img src="hero-mobile.jpg" alt="Hero"> </picture>
- 浏览器按
<source>顺序匹配第一个满足media的项，匹配即停，不继续往下查 - 如果所有
<source>都不匹配，就回退到<img>的src -
srcset里可以写多个分辨率描述符（如hero-2x.webp 2x），但和media是正交能力，别混用逻辑
media="(prefers-reduced-motion: reduce)" 怎么触发
这个值不会靠模拟器或 DevTools 切换开关自动生效——它依赖系统级设置。macOS 要开「辅助功能 → 显示 → 减少运动」；Windows 是「设置 → 辅助功能 → 视觉效果 → 简化动画」；iOS/iPadOS 在「设置 → 辅助功能 → 动态效果 → 降低动态效果」。
常见误判：本地开发时没改系统设置，却以为 media 不工作。
- 可临时用 Chrome DevTools 的 Rendering 面板勾选
Emulate CSS reduced motion快速验证 - 搭配
<source>可加载静态图替代 GIF/视频，例如：<source srcset="chart-static.svg" media="(prefers-reduced-motion: reduce)"> - 注意 Safari 对
prefers-reduced-motion支持较晚（v14+），旧版本会跳过该<source>
为什么设置了 media 却还是加载了高清图
关键原因往往不是 media 写错了，而是浏览器预加载器（preload scanner）在解析 HTML 时，尚未执行 JS、也未计算媒体查询，就提前请求了 <img src> 或首个 <source> 的资源。
- 如果
<picture>里没写<img>的src，而只依赖<source>，预加载器可能忽略全部，导致首屏空白 - 若想完全阻止非匹配资源加载，不能只靠
media，得配合loading="lazy"+ JS 动态插入，或用data-srcset+ 初始化脚本 - Chrome 的 Network 面板里看 Initiator 列：如果是
Parser，大概率是预加载器触发的——这时media还没起作用
真正可靠的响应式加载，需要接受「首个资源可能被预加载」的事实，把兜底图控制在小体积、通用格式（如 WebP 或 AVIF），而不是指望 media 绝对屏蔽。
