标签本身不响应式显示图片，它只是容器，浏览器根据media条件从上到下匹配并只加载首个符合的源；需确保media互斥、提供兜底、检查404与缓存，并按语义合理选用或css背景图。

标签本身不“响应式显示图片”，它只是个容器，真正起作用的是浏览器根据规则匹配当前视口、设备像素比等条件后加载的那张图。

为什么写了还是只加载一张图

这不是 bug，是预期行为：浏览器会从上到下遍历，一旦匹配就停止，不会继续加载后面的。常见实际原因包括：

• media条件重叠，比如同时写了(max-width: 768px)和(max-width: 1024px)，后者永远不会触发
• 漏写<img>标签，导致无兜底——某些浏览器直接不渲染，或只显示alt文本
• srcset里某个路径返回 404，浏览器静默跳过，继续往下找；你得去 Network 面板看真实请求，而不是仅凭页面显示判断
• 缓存干扰：开发时没勾选 DevTools 的 Disable cache，看到的仍是旧资源

按屏幕宽度切换图源的正确写法

核心是<source></source>的media + srcset配合，且顺序必须由小到大（或由大到小，但必须互斥）：

<picture><source media="(max-width: 480px)" srcset="hero-sm.jpg"><source media="(max-width: 768px)" srcset="hero-md.jpg"><source media="(min-width: 769px)" srcset="hero-lg.jpg">
  @@##@@
</source></source></source></picture>

注意：media值必须是完整媒体查询语法，不能简写成768px或small；srcset里可以放单个路径（适合纯宽度切换），也可以用w描述符（如hero-800w.jpg 800w）配合sizes做更精细控制。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

适配高 DPR 屏幕（如 Retina）要不要加 x

要，但别和w混用在同一srcset里。比如下面两种写法可取，但不能混：

• 用x： srcset="logo@1x.png 1x, logo@2x.png 2x" —— 适用于固定尺寸图（如 logo）
• 用w + sizes： srcset="hero-400w.jpg 400w, hero-800w.jpg 800w" sizes="(max-width: 600px) 100vw, 50vw" —— 适用于流体容器中的大图

sizes必须写在<img src="hero-fallback.jpg" alt="首页主视觉图">上，且其值应与 CSS 中该图片容器的实际宽度逻辑一致，否则浏览器无法准确估算所需分辨率。

真正容易被忽略的点

不是语法对不对，而是语义和上下文是否合理：<picture></picture>适合内容性图片（有信息量、需不同构图或裁剪）；纯装饰性大图用 CSS background-image + background-size: cover更轻量、更可控；而首屏关键图建议去掉loading="lazy"，并加上decoding="async"防解码阻塞。

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