media属性必须写在source标签内，且语法完整、顺序从宽到窄、边界互斥；img为必需兜底节点，src和alt不可省略，否则图片不加载或可访问性失败。
media属性必须写在里，上加无效
浏览器完全不读取兜底图。
常见错误写法：<picture media="(max-width: 768px)"> → 整个media被忽略；<source media="max-width: 768px"> → 缺括号，静默跳过该<source media="768px"> → 非法值，等效于not all，永远不匹配。
正确写法必须带完整括号和单位：media="(min-width: 1200px)"、media="(max-width: 767px)"、media="(min-width: 48em) and (orientation: landscape)"。
断点顺序必须从宽到窄，否则小屏设备永远拿不到高清图
浏览器对
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐顺序：
<source media="(min-width: 1440px)" srcset="desk-2x.jpg">→<source media="(min-width: 1200px)" srcset="desk-1x.jpg">→<source media="(min-width: 768px)" srcset="tab.jpg">→<source media="(max-width: 767px)" srcset="mob.jpg"> - ❌ 错误顺序：把
max-width: 767px放最前 → 所有≤767px宽度（包括缩放后的桌面窗口、折叠屏半开状态）都会命中它，大图永远不会加载 - ⚠️ 边界值要互斥：避免
min-width: 768px和max-width: 768px并存，768px宽度行为不可控，建议用767px和769px明确分隔
断点数值不能抄设备列表，得跟CSS布局实际断裂点一致
media里的像素值不是“iPhone 15 Pro宽度”，而是你页面内容开始错位、换行或撑不开的那个视口宽度。抄设备参数表最容易导致图片和样式错位。
实操建议：
- 打开Chrome DevTools响应式模式，拖动宽度滑块，眼睛盯着卡片间距、文字折行、图片裁切点，记下那个“看着不对劲”的像素值（比如623px、892px），再向上取整为640px、900px等易维护值
- 全局用3–4个断点足够：
480px（窄屏极限）、768px（内容舒展起点）、1024px（小桌面）、1200px（宽屏）；再多说明布局本身弹性不足 - 别混用
max-width和min-width写法，比如@media (max-width: 767px)和@media (min-width: 768px)并列，在767.5px（如110%缩放iPad）下两者都不命中，留白风险高
兜底的![HTML中picture标签的media查询语法和常用断点设置]()
不是可选装饰，漏掉或写错会导致图片区域空白
是语义必需节点，不是“备用方案”。它承担三重角色：降级加载、可访问性保障（alt必填）、旧版Safari兼容入口。漏掉或写成自闭合
<img />，部分浏览器直接不触发图片加载。
关键要求：
-
src属性不可省略，即使写了srcset也得有基础路径 -
alt必须存在且有意义，否则可访问性失败，某些浏览器也不加载 - 推荐给
<img>也配srcset和sizes，尤其当fallback图也要适配2x屏时 - 如果发现“始终只加载
”，先查Network面板：所有
是否返回404？或被MIME类型拦截（比如服务端没配好 Content-Type: image/webp）？
source的media是否合法、顺序是否严格从宽到窄、img是否真正可用——这三个点任一出错，浏览器就直接退回到兜底图，连警告都不会给你。 
