media属性仅在标签内生效，写在上被浏览器忽略；须置于前、顺序从宽到窄、media值需带完整括号，且必须存在并含src与alt。

media属性写在里才生效，上加没用

浏览器只认 <source></source> 标签内的 media 属性，<picture></picture> 自身加 media 完全被忽略。常见错误是把断点逻辑写在 <picture></picture> 上，结果所有 <source></source> 都不匹配，直接 fallback 到 <img src>。

必须确保：

• <source></source> 在 <img> 之前，顺序错则整条被跳过
• media 值是合法 CSS 媒体查询字符串，带完整括号：✅ media="(min-width: 768px)"，❌ media="min-width: 768px"（缺括号，静默失效）
• <img> 必须存在，且含 src 和 alt，否则整个 <picture></picture> 渲染失败

用type属性优先加载WebP/AVIF，media只管宽度断点

media 本身不识别图片格式，它只做视口宽度判断；真正控制格式切换的是 type 属性。浏览器按 <source></source> 顺序检查 type，遇到第一个自己支持的就加载对应 srcset，其余跳过。

典型写法是把高优格式（如 AVIF）放前面，低优格式（如 WebP）居中，JPG 作兜底：

<picture><source media="(min-width: 1024px)" srcset="hero.avif" type="image/avif"><source media="(min-width: 1024px)" srcset="hero.webp" type="image/webp"><source media="(max-width: 1023px)" srcset="hero-mobile.avif" type="image/avif"><source media="(max-width: 1023px)" srcset="hero-mobile.webp" type="image/webp">
  @@##@@
</source></source></source></source></picture>

注意：media 和 type 是并行条件，两者都需满足才启用该 <source></source>；但 type 不影响匹配顺序，只过滤支持性。

断点顺序必须从宽到窄，否则小屏永远卡第一条

浏览器从上到下扫描 <source></source>，一旦某条 media 为 true 就立即加载、停止后续判断。如果把 max-width 放最前，比如 media="(max-width: 767px)"，那所有宽度 ≤767px 的设备（包括手机、平板横屏、甚至部分桌面缩窗）都会命中它，后面更宽的规则根本没机会执行。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

正确顺序示例：

• 桌面端（≥1200px）→ 加载 AVIF 大图
• 平板（768px–1199px）→ 加载 WebP 中图
• 手机（≤767px）→ 加载 WebP 小图

对应代码要严格按此顺序排列，且数值区间不能重叠或留空，否则出现未覆盖的视口宽度，就会 fallback 到 <img src="hero.jpg" alt="活动主视觉">。

分辨率适配靠srcset + sizes，不是靠media

media 只管“什么宽度用哪张图”，不管“同一宽度下该用 1x 还是 2x”。要让 Retina 屏自动加载双倍图，必须用 srcset 提供多密度源，并配 sizes 告诉浏览器这张图在页面中大概占多宽。

例如：

<source media="(min-width: 1024px)" srcset="hero-1200w.jpg 1x, hero-2400w.jpg 2x" sizes="(min-width: 1024px) 1200px, 100vw"></source>

这里 sizes 告诉浏览器：在 ≥1024px 视口时，这张图显示宽度约 1200px；浏览器再结合设备 DPR（比如 2x），就知道该选 hero-2400w.jpg。

容易忽略的点：sizes 必须存在，否则浏览器无法估算目标宽度，srcset 中的 w 描述符就失去意义，可能退化成只加载第一个资源。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！