标签不负责截图，而是按条件加载预存的多端适配图片；通过media断点智能切换手机、平板、桌面三张语义匹配的截图，实现art direction，需正确书写picture结构、覆盖断点、保留img降级及alt描述。

标签本身不负责“截图”，它只负责**按条件加载已准备好的图片资源**。在帮助中心图文场景中，若需为同一功能展示“手机端截图”“平板端截图”“桌面端截图”，核心不是用 截图，而是用它**智能切换三张不同构图、不同尺寸、甚至不同格式的预存截图**——这正是 最擅长的 art direction（艺术指导）用法。

明确目标：一张图位，三端内容精准对应

帮助中心常需说明“该按钮在 iPhone 上长这样，在 iPad 上布局不同，在 PC 上又一种形态”。这时不能靠缩放同一张大图，而应提供三张语义匹配的截图： - 手机截图：竖屏、聚焦操作区域、无侧边栏 - 平板截图：横屏、显示导航+内容区、适配中等宽度 - 桌面截图：带完整菜单栏、多列布局、高宽比更宽 就是让浏览器根据用户当前屏幕宽度，自动挑出最合适的那张来展示。

写法要点：media 断点 + 语义化命名 + 必备兜底

直接使用 的 media 属性做断点判断，顺序从窄到宽（或从宽到窄），浏览器取第一个匹配项：

<picture><source media="(max-width: 480px)" srcset="help-login-iphone.jpg"><source media="(max-width: 1024px)" srcset="help-login-ipad.jpg"><source media="(min-width: 1025px)" srcset="help-login-desktop.jpg">
  @@##@@
</source></source></source></picture>

• ✅ media 值要覆盖常见设备断点（如 480px、768px、1024px），避免空隙
• ✅ 所有 <source></source> 必须放在 <img src="help-login-desktop.jpg" alt="登录界面示意图：手机、平板与电脑三种设备上的显示效果"> 之前；<img> 不可省略，它是降级保障和 alt 文本唯一载体
• ✅ alt 只写在 <img> 上，描述整体意图（如“登录界面在三种设备上的显示效果”），不要拆成“iPhone截图”“iPad截图”——因为屏幕阅读器不会读 <source></source>

进阶建议：提升加载质量与兼容性

- 若支持 WebP，把 WebP 版本全放在 JPEG 前面，实现“WebP 优先，JPEG 降级”： ```html ``` - 不要依赖 JavaScript 判断设备类型（UA 不可靠、易失效）， 的 media 查询由浏览器原生执行，稳定且高效 - IE 全系不支持 ，但 `` 会正常 fallback，所以帮助中心仍能显示桌面版截图，不影响基础可用性

配套动作：截图怎么来？别指望 HTML 生成

- 真实截图需提前准备：用真机/模拟器打开页面，截取三端画面，裁剪留白，统一风格（如圆角、阴影、设备边框） - 推荐工具：iOS 屏幕录制后逐帧截图；Chrome DevTools 设备模拟器（Nexus 5X / iPad Pro / Desktop）；Figma 或 Sketch 组合标注 - 文件命名清晰（如 `help-login-iphone@2x.jpg`）、压缩得当（TinyPNG）、部署到 CDN， 才能快速加载

不复杂但容易忽略。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

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