如何用HTML代码使用picture媒体查询切图-html教程-PHP中文网

picture标签需按从宽到窄顺序写source，media必须为合法css媒体查询，srcset与sizes配对，img为必需兜底；顺序错、语法错或缺img src均导致只加载fallback图。

如何用html代码使用picture媒体查询切图

picture标签怎么写才能正确响应不同屏幕

<picture></picture> 本身不执行媒体查询，它依赖内部的 <source></source> 标签配合 media 或 srcset 属性来切换图片。浏览器按 <source></source> 顺序匹配，遇到第一个满足条件的就加载，后面的忽略。所以顺序很重要——从最具体到最宽泛，比如先写 (min-width: 1200px)，再写 (min-width: 768px)，最后用 <img> 作为兜底。

<source></source> 必须放在 <picture></picture> 内且在 <img> 之前，否则被忽略
media 属性值是 CSS 媒体查询字符串，不是布尔值，不能写成 media="true"
<img> 的 src 和 alt 是必需的，它是无匹配时的 fallback，也是可访问性基础
不要给 <source></source> 加 alt，它不参与语义渲染

media和srcset混用时谁优先

media 控制“是否选用这张源”，srcset 控制“在这张源里选哪个分辨率”。两者是正交逻辑：先由 media 筛出候选 <source></source>，再由其 srcset（配合 sizes）让浏览器选最合适的资源。

如果某个 <source></source> 有 media 但没匹配上，它的 srcset 完全不参与计算
<img> 的 srcset 只在所有 <source></source> 都不匹配时生效
sizes 必须和 srcset 成对出现，否则浏览器无法换算物理像素宽度，可能选错图

<picture><source media="(min-width: 1200px)" srcset="hero-1920.jpg 1x, hero-3840.jpg 2x" sizes="100vw"><source media="(min-width: 768px)" srcset="hero-1200.jpg 1x, hero-2400.jpg 2x" sizes="100vw">
  @@##@@
</source></source></picture>

为什么图片没切换、总是加载默认图

常见原因不是语法错，而是逻辑冲突或遗漏：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

所有 <source></source> 的 media 查询都不满足，退回到 <img src="hero-800.jpg" alt="首页横幅"> —— 检查当前视口宽度是否真落在某个区间内
<source></source> 写了 src 而不是 srcset，且没配 media，浏览器会直接忽略该 <source></source>（规范要求至少含 srcset 或 type）
<img src> 缺少 src，导致整个 <picture></picture> 渲染失败，显示空白或加载错误图标
使用了 width/height 内联样式但没设 display: block，造成高度塌陷，图片不可见，误以为没加载

移动端适配要注意的兼容性坑

Safari 13.1+ 才完整支持 <source></source> 的 media + srcset 组合；旧版 Safari（iOS 13.0 及更早）会忽略 <source></source>，只加载 <img>。如果必须支持这些旧版本：

不要用 <source></source> 做关键内容切换（比如不同构图的 banner），改用 CSS background-image + 媒体查询
或者用 JS 检测 HTMLPictureElement 是否存在，降级处理
type="image/webp" 在 iOS 14.5+ 才稳定支持，此前 WebP 图片会被跳过，<img> 的 src 必须是 fallback 格式（如 JPEG）

picture 的核心价值不在“多图”，而在精准控制资源加载时机与格式选择。很多问题其实出在把 media 当成 JS 条件判断来用，而忘了它是纯声明式、顺序匹配、无回溯的机制。