标签不支持嵌套，因html规范限定其子元素仅为和，嵌套会触发浏览器自动修复；srcset中可用1x、2x等描述符并列多dpr版本，需统一用x且顺序由低到高；断点与dpr需通过多个分别绑定media查询与对应srcset实现。
<picture></picture> 不能放在另一个 <picture></picture> 里面，浏览器会忽略内层标签或直接丢弃无效结构。
为什么不能嵌套 <picture></picture>
HTML 规范明确要求 <picture></picture> 是一个容器元素，只接受 <source></source> 和结尾的 <img> 作为子元素。任何其他嵌套（包括再套一层 <picture></picture>）都属于非法 DOM 结构，现代浏览器会自动“修复”：把内层 <picture></picture> 移出、或静默跳过，最终只保留最外层逻辑。这不是兼容性问题，是解析规则本身禁止。
<source></source> 的 srcset 里能写多个 DPR 版本吗
可以，而且这是标准用法。每个 <source></source> 的 srcset 属性里允许用 x 描述符并列多个分辨率版本，浏览器按 window.devicePixelRatio 自动选最匹配的一个：
<source media="(max-width: 768px)" srcset="thumb-1x.jpg 1x, thumb-2x.jpg 2x, thumb-3x.jpg 3x"></source>
- 必须只用
x，别混w（例如"thumb-400w.jpg 400w, thumb-2x.jpg 2x"❌） - 顺序建议从低到高：
1x在前、3x在后，避免高 DPR 设备误选低清图 -
srcset中的 URL 必须全部可访问，任一 404 不影响其余选项，但会降低 fallback 容错率
想实现“断点 + DPR”双重控制，该怎么组织 <source></source>
靠多个 <source></source> 分别绑定不同 media 查询，并在各自 srcset 里写对应 DPR 版本。浏览器先匹配 media，再在命中那个 <source></source> 的 srcset 里按 DPR 选图：
<picture><source media="(max-width: 480px)" srcset="mob-1x.jpg 1x, mob-2x.jpg 2x"><source media="(min-width: 481px) and (max-width: 1200px)" srcset="tab-1x.jpg 1x, tab-2x.jpg 2x"><source media="(min-width: 1201px)" srcset="desk-1x.jpg 1x, desk-2x.jpg 2x, desk-3x.jpg 3x"> @@##@@ </source></source></source></picture>
-
media值必须带完整括号："(max-width: 480px)"✅，"max-width: 480px"❌ - 断点之间留 1px 缝隙（如
480px/481px），避免边界宽度行为未定义 - 最后一个
<img src="desk-1x.jpg" alt="示例图">的src必须存在，且应与最高优先级<source></source>的 1x 图一致，否则 DPR=1 时可能加载失败
替代嵌套的真正需求：艺术方向切换 + DPR 适配
如果你本意是“小屏用裁剪图 + 高 DPR，大屏用全景图 + 高 DPR”，那不是嵌套问题，而是 <picture></picture> 的标准使用场景——每个 <source></source> 提供不同构图的图片，再各自配好 DPR 版本即可。所谓“嵌套”，其实是混淆了「多构图」和「多分辨率」两个正交维度，它们天然就该由同一层 <source></source> 分别承担。
最容易被忽略的是：<img> 的 src 不只是兜底，它还参与 DPR 匹配；而所有 <source></source> 的 type 若写错 MIME 类型，整条规则就会被跳过——连 fallback 都不会触发，只会安静地加载 <img>。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
