“完美复现”需手动导出三张语义明确的独立图片并按宽到窄顺序配置media断点，picture仅分发路径而不裁剪缩放；source须语法正确、顺序合理、并行匹配，且img为必需兜底元素。

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

为什么“完美复现”不靠 picture 自动裁剪，而靠你提前裁好三张图

标签本身不做任何像素级裁剪或缩放，它只是个“条件分发器”。设计师给的“手机竖版特写”“桌面横幅全景”“深色模式优化版”，必须是你自己导出的三张独立文件——hero-mobile.jpg、hero-desktop.jpg、hero-dark.jpg。浏览器不会从一张大图里抠人脸，它只认路径。所谓“复现意图”，第一步就是把设计稿拆成语义明确的源图，而不是指望 HTML 帮你“智能理解”。

media 断点写错，小屏永远加载桌面图

常见失效现象：iPhone 上打开页面，Network 面板里明明有 hero-mobile.jpg 请求，但实际加载的是 hero-desktop.jpg。 原因几乎全是 source 的 media 顺序或语法问题： - media 值漏括号，比如写成 media="max-width: 768px" → 浏览器直接忽略整条 source - source 顺序颠倒，把 media="(max-width: 767px)" 放在最前面 → 所有宽度 ≤767px 的设备都命中，后面两条永不执行 - 断点重叠，比如同时存在 max-width: 768px 和 min-width: 768px → 768px 宽度时只取第一条，第二条被跳过 正确做法是宽到窄排列：media="(min-width: 1201px)" → media="(min-width: 769px)" → media="(max-width: 767px)"

深色模式、高 DPR、WebP 支持，得靠多组 source 并行控制

设计师说“暗色下文字更清晰”，不是加个 CSS 滤镜就行——滤镜会吃掉细节，还可能让文字糊掉。真正可靠的是用另一组 source： - <source media="(prefers-color-scheme: dark)" srcset="hero-dark.jpg"></source> - <source type="image/webp" srcset="hero-desktop.webp"></source> - <source media="(max-width: 767px)" srcset="hero-mobile@1x.jpg 1x, hero-mobile@2x.jpg 2x"></source> 注意：这些 source 是并行匹配的，浏览器会同时检查 media、type、srcset 描述符；但只要有一条完全匹配（比如当前是深色模式 + 支持 WebP），就立刻选用，其余忽略。所以 type 写错 MIME 类型、srcset 混用 w 和 x，都会导致整条失效，静默 fallback 到 img。

img 不是装饰，缺了它整个 picture 就是空盒子

很多团队把 img 当成可选兜底，结果上线后 Safari 或旧版 Chrome 里首页大图直接空白。这不是 bug，是规范强制要求： - picture 内最后一个子元素**必须是 img**，且必须带 src 和 alt - 不能写成 <img> 或 <img>，必须是完整闭合标签 <img src="fallback.jpg" alt="科技总部大楼外立面"> - src 路径必须真实存在，404 不报错，只静默 fallback，调试得靠 Network 面板清缓存后看实际请求 最容易被忽略的点：设计师没给 fallback 图，开发随手填个 src="placeholder.jpg"，结果这张图既没压缩也没适配 DPR，在 2x 屏上模糊得没法看——真正的“复现意图”，连 fallback 都得是设计语言的一部分。

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