标签本身不自动实现跨平台自适应，它仅提供声明式语法；真正起作用的是的media、srcset和sizes组合，配合正确准备的图片资源——任一环节出错（如媒体条件错误、资源缺失、缺失或type不匹配）都会导致降级加载或显示失败。
<picture></picture> 标签本身不“自动”实现跨平台自适应，它只是提供了一套声明式语法，真正起作用的是你如何组合 <source></source> 的 media、srcset 和 sizes，再配合底层图片资源的准备。没配对的资源或写错的媒体条件，浏览器照样加载大图到手机上。
media 属性写不对，<source></source> 就等于没写
常见错误是把 media 当成“设备类型判断”，比如写 media="(max-width: 768px) and (orientation: portrait)"，但实际场景中平板横屏也满足该条件，结果小图被错误用于大屏横屏——这不是 bug，是条件逻辑本身没覆盖真实断点。
- 优先用视口宽度（
min-width/max-width）做主断点，别混用orientation或hover做核心分支 - 多个
<source></source>必须按从窄到宽（或从高 DPR 到低 DPR）顺序排列，浏览器取第一个匹配项，顺序反了会跳过本该生效的规则 - 移动端 Safari 对
media中带空格的写法（如( max-width: 768px )）兼容性差，去掉空格更稳
srcset + sizes 搭配不当，高 DPR 设备照样模糊
只写 srcset="img-400w.jpg 400w, img-800w.jpg 800w" 不够，浏览器不知道“当前容器多宽”，没法选最合适的图。必须配 sizes 告诉它：在不同视口下，这张图占多少视口宽度。
- 例如：
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"，表示小屏占满、中屏占一半、大屏占三分之一 - 如果省略
sizes，浏览器默认按100vw算，那img-800w.jpg在 400px 宽的 iPhone 上也会被当成“刚好够用”，结果 DPR=3 的屏幕显示模糊 -
srcset里用x描述符（如icon.png 2x）适合固定尺寸图标，但不适合流式图片；流式场景必须用w描述符 +sizes
没有 fallback <img>，图片直接不显示
<picture></picture> 是容器，它自己不渲染任何内容。所有 <source></source> 都不匹配，或浏览器根本不认识 <picture></picture>（如 IE11），就全靠最后那个 <img> 顶上。
-
<img>的src必须指向一张真实存在的图片，不能留空或写占位符 -
<img>的alt不可省略，否则无障碍访问和 SEO 都会受损 - 别为了“省事”把
<img>的src指向和某个<source></source>相同的图——它应该是一张通用、中等分辨率、格式兼容性最好的 fallback 图（比如 JPEG 而非 WebP）
WebP / AVIF 图片在旧浏览器里直接挂掉
现代格式压缩率高，但 Safari 13.1 以下、Firefox 65 以下、所有 IE 都不支持 WebP。<source></source> 的 type 属性就是干这个的：
<source media="(min-width: 800px)" srcset="hero.avif" type="image/avif"><source media="(min-width: 800px)" srcset="hero.webp" type="image/webp"><source media="(min-width: 800px)" srcset="hero.jpg" type="image/jpeg"></source></source></source>
浏览器按顺序试播，遇到第一个能解码的 type 就停。注意：type 必须精确匹配 MIME 类型，写成 image/jpg 或漏掉 type 都会导致降级失效。
真正容易被忽略的，是资源生成环节——你得有对应每种 srcset 条目的图片文件，且命名、尺寸、压缩参数都得人工对齐。一个 1200w 的 WebP 图如果实际只有 800 像素宽，sizes 再准也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
