picture标签本身不裁剪图片，仅按media条件选择预裁剪的源图；常见失效原因包括media写在上、缺括号、置于后、断点重叠及顺序错误（须从宽到窄），且必须存在并含src与alt。

picture 标签本身不裁切图片，它只负责按条件选图；真正实现“移动端裁切、桌面端全景”的前提是——你得提前准备好裁切好的多张源图。

为什么写了 media 却总加载同一张图

这不是浏览器不支持 picture，而是条件没被正确识别或匹配逻辑出错：

• media 属性写在 标签上（如 ）→ 浏览器直接忽略整个属性
• media="(max-width: 768px)" 缺少括号 → 写成 media="max-width: 768px" 就静默失效
• 放在 后面 → 浏览器跳过所有 ，只加载
• 断点重叠，比如同时存在 (min-width: 768px) 和 (max-width: 768px) → 768px 宽度行为未定义，Chrome 可能命中第一个，Safari 可能跳过

source 的顺序必须从宽到窄

浏览器是线性扫描，遇到第一个为 true 的就停，不会继续比对。顺序错了，宽屏设备永远拿不到桌面图：

• ✅ 正确（桌面 → 平板 → 手机）：，，
• ❌ 错误（手机规则放最前）： → 所有设备都走这条，后面两条完全无效

img 标签不是可选的，是强制存在的兜底

必须存在，且必须带 src 和 alt：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 它是语义基础：屏幕阅读器只读 的 alt， 不参与可访问性
• 它是降级保障：不支持 picture 的旧浏览器（如 IE）直接忽略整个 ，只渲染
• 它也是 fallback：当所有 的 media 都不匹配时（比如视口宽度刚好卡在断点缝隙），浏览器会加载

容易被忽略的 MIME 类型与服务器响应头

被跳过、只显示 ，常因 type 声明和实际文件类型不一致：

• type="image/webp" 必须对应服务器返回的 Content-Type: image/webp，大小写、拼写、空格全要一致
• type="webp" 或 type="image/jpg" 都是非法值，会被浏览器静默丢弃
• Network 面板里看到 blocked:mime-type 或 404，基本就是 type 和服务配置对不上
• 用 WebP 时建议搭配 + + 三层 fallback，确保兼容性

真正麻烦的从来不是写几行 HTML，而是保证每张裁切图都精准对应设备意图、每个 media 断点无歧义、每个 type 和服务器响应头严丝合缝——漏掉任意一环，picture 就退化成一个摆设容器。

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