标签不能替代幻灯片逻辑，仅负责按media条件加载适配图片；常见失效因media语法错误、断点未覆盖视口、缺src、mime类型不匹配或js插入未等dom就绪。
picture 标签本身不能直接“解决”幻灯片适配——它只负责按条件选图，幻灯片逻辑（切换、动画、容器尺寸）必须由 JS 或 CSS 控制；但用对 <picture></picture> 能让每张幻灯片在不同设备上加载真正需要的图，避免小屏下强塞 4K 图、大屏下糊成马赛克。
为什么幻灯片里 <picture></picture> 容易白写
常见失效不是代码没写，而是浏览器根本没触发切换：
-
media值写成max-width: 768px（缺括号）→ 浏览器忽略整条<source></source>，静默走<img src> - 所有
<source></source>的media条件都覆盖不到当前视口（比如只写了(min-width: 1024px)，但用户在 900px 宽的笔记本上看）→ 全部跳过，只显示<img>的兜底图 -
<img>没写src属性 → 幻灯片区域留空，不报错，调试时 Network 面板也看不到请求 - 用了
type="image/webp"，但服务器返回Content-Type: text/plain→ Chrome 显示blocked:mime-type，降级失败
幻灯片场景下 media 断点怎么设才不打架
幻灯片容器宽度常随布局变化（比如 flex 容器缩放、CSS Grid 占比浮动），media 必须按真实视口宽度切，不能凭感觉估：
- 移动端优先：用开区间断点，避免重叠 →
media="(max-width: 479px)"→media="(min-width: 480px) and (max-width: 1023px)"→media="(min-width: 1024px)" - 别写
screen and (max-width: 768px)：冗余且部分旧 WebView 不认screen关键字 - 如果幻灯片全屏展示（如
height: 100vh），断点可参考设备典型视口：手机竖屏 ≈ 360–414px，平板横屏 ≈ 768–1024px，桌面 ≥ 1200px - 每个
<source></source>的srcset推荐只配一张图（非多密度）：幻灯片通常需换构图而非仅换分辨率，photo-mobile.jpg和photo-desktop.jpg更实用
要不要在幻灯片里混用 srcset + sizes？
要，但只在「同一构图、仅需适配 DPR」时用——比如所有幻灯片都是居中大图，但 iPhone 14 Pro 要加载 @3x 版本：
- 必须同时写
srcset和sizes：srcset="slide@1x.jpg 1x, slide@2x.jpg 2x, slide@3x.jpg 3x"+sizes="(max-width: 768px) 100vw, 50vw" -
sizes值必须匹配实际渲染宽度：如果幻灯片容器在桌面端固定宽 800px，就写sizes="800px"，别写100vw导致大图在小屏下载 - 顺序不能错：把
3x放最后，否则2x设备会卡在1x上不往下看 - 严禁混用
w和x：例如"slide-800w.jpg 800w, slide@2x.jpg 2x"是未定义行为，Chrome 可能整个srcset忽略
最易被忽略的一点：幻灯片组件初始化时，若用 JS 动态插入 <picture></picture>，必须确保 DOM 插入完成后再触发浏览器解析——否则 <source></source> 可能来不及参与预加载，首帧仍走兜底图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
