的 media 属性需为合法 css 媒体查询（如 (max-width: 768px)），仅在此标签内生效；匹配按从上到下短路执行， 是必需兜底项且不支持 media。
picture 的 media 查询只在 <source></source> 里生效，写错括号、顺序或漏掉 <img> 就会直接退化成一张图
media 属性必须是完整合法的 CSS 媒体查询
浏览器不会帮你补括号或单位，max-width: 768px 是错的，必须写成 (max-width: 768px)；768 或 768px 单独出现也无效。常见错误包括：
- 把
orientation: landscape直接当字符串写，漏掉外层括号 → 应为(orientation: landscape) - 混用逻辑运算符但没加空格，如
(min-width:768px)and(max-height:800px)→ 必须有空格：(min-width: 768px) and (max-height: 800px) - 在
<img>上写media属性 —— 它不认，只认<source></source>里的
匹配顺序决定最终加载哪张图
浏览器从上到下扫描 <source></source>，遇到第一个 media 为 true 的就停，后面全跳过。这不是“多选”，是短路匹配：
- 移动端优先？把窄屏规则放最前：
<source media="(max-width: 480px)"></source> - 横屏优先？把
(orientation: landscape)放第一位，再跟(orientation: portrait) - 断点别重叠：避免
max-width: 768px和min-width: 768px同时存在，768px 宽时行为不可控
viewport 设置会影响 media 判断结果
如果页面没加 <meta name="viewport" content="width=device-width">，移动端的 (max-width: 480px) 很可能永远不匹配 —— 因为视口默认是 980px 左右。另外几个容易被忽略的点：
- 折叠屏展开后仍报
portrait，但宽度已超 1200px，单靠orientation不够，建议叠加and (min-width: 900px) - 桌面端横屏（比如 1920×1080）也会触发
(orientation: landscape)，若不想让它加载竖构图图，加and (max-height: 700px)过滤小屏横屏 - 用 JS 动态插入
<picture></picture>后改source.media，浏览器不会自动重选 —— resize 或重新挂载 DOM 才会触发重新评估
不支持 picture 的老浏览器只看 ![]()
的 src
<img> 不是可选项，是强制要求的兜底节点。它必须作为 <picture></picture> 的最后一个子元素，且带 src 和 alt：
- 漏写
<img>→ 整个<picture></picture>在 IE 或旧 Safari 里渲染为空白 -
<img>没写src→ 即使<source></source>全部匹配成功，也可能因 fallback 缺失导致加载异常 - 想兼容 DPR（如 Retina），
srcset和sizes要写在<img>上，<source></source>里的2x描述符会被忽略
真正难的不是写对语法，而是理清 media、srcset、sizes 三者的职责边界：media 控制“谁来用这张图”，srcset（在 img 上）控制“这张图里挑哪份分辨率”，sizes 告诉浏览器“这张图在页面里大概占多宽”——三者错一个位置，整个链路就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
