不存在放之四海而皆准的“最佳断点”，必须严格对齐项目CSS中的@media视口宽度值，确保<picture>的media属性与CSS断点完全一致、顺序从宽到窄且无间隙，并覆盖真实设备viewport（含折叠屏、高DPR设备），最后以无条件兜底收尾。
为什么“最佳断点”根本不存在
没有放之四海而皆准的“最佳断点”，只有和你项目 CSS 断点严格对齐、且覆盖真实设备视口宽度的断点。浏览器匹配 <source> 时只看 media 值是否为真，不关心你叫它“平板”还是“桌面”——错位 1px 就可能让图片和布局错开。
断点必须和 CSS 视口宽度一致
CSS 中写的是 @media (max-width: 768px)，那 <source media="(max-width: 768px)"> 才算对齐。如果 CSS 用的是 767px，而 <picture> 里写成 768px，在宽度恰好为 768px 的设备上，CSS 生效但图片不换，视觉割裂就出现了。
- 查你项目中实际生效的
@media规则，逐条抄进media属性，一个字符都不能改 - 不要凭经验写
480px、768px、1024px—— 现代折叠屏、高 DPR 平板的视口宽度早已超出这些旧值 - 用 Chrome DevTools 的 Device Toolbar 查当前模拟设备的
viewport width，不是设备物理分辨率
顺序必须从宽到窄，且互斥无间隙
浏览器不选“最匹配”，只取“第一个匹配”。<source> 列表本质是一组 if-else 链，顺序错了，大图永远加载不上。
- ✅ 正确顺序：
<source media="(min-width: 1440px)">→<source media="(min-width: 1024px)">→<source media="(max-width: 1023px)"> - ❌ 错误示例：
max-width: 768px放最前 → 所有 ≤768px 的设备都卡在这条，后面全失效 - ⚠️ 间隙风险：如果 CSS 断点是
768px和1024px，但<source>写成(min-width: 769px)和(min-width: 1025px)，768–1024px 区间会 fallback 到<img src>
移动端兜底不能只靠 max-width
仅用 media="(max-width: 480px)" 已无法覆盖主流小屏设备。iPhone 14 Pro Max 横屏时 viewport width 是 926px，很多安卓折叠屏展开后也远超 480px。硬写死窄断点，等于主动放弃这部分用户。
立即学习“前端免费学习笔记（深入）”；
- 优先用
max-width+orientation组合，比如media="(max-width: 767px) and (orientation: portrait)" - 对横屏小屏（如折叠屏半开），单独加一条
media="(min-width: 768px) and (max-width: 926px) and (orientation: landscape)" - 最后一项必须是无条件兜底：
media="(max-width: 9999px)"或直接省略media（但不推荐，语义不清）
<picture> 的 media 条件全部咬合在同一套视口数值体系里——漏掉任意一环，用户看到的就是错位、模糊或空白。 
