标签让浏览器按设备能力自动选图，关键在正确配置media断点（互斥、括号完整）、srcset与sizes配对、type与服务端content-type一致，任一错误即回退至fallback图。

标签在产品画廊中不是“切换”图片，而是让浏览器按设备能力自动选最合适的那一张——不靠JS、不卡顿、不重复下载。关键不在“怎么切”，而在“怎么配”：media断点要互斥、srcset和sizes必须配对、type声明要和服务端一致，漏一个就退回小图。

用media分宽度，但顺序和语法不能错

产品图常需不同构图（比如桌面展示全貌，手机只突出主体），这时用配合media最稳妥：

• 断点从宽到窄写：media="(min-width: 1200px)" → media="(min-width: 768px)" → media="(max-width: 767px)"，浏览器匹配第一个就停
• 括号不能少：写成media="max-width: 768px"或media="tablet"，整个被忽略
• 避免重叠：比如(min-width: 768px)和(min-width: 1024px)并存，1024px设备永远走第一条，大图加载不上

用type实现WebP优先，JPEG自动降级

产品图体积大，WebP通常比JPEG小30%以上。把WebP放前面，浏览器支持就用它，不支持就跳过，落到后面的JPEG或最终的：

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

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

下载

• <source type="image/webp" srcset="prod-800.webp 800w, prod-1200.webp 1200w" sizes="90vw"></source>
• <source type="image/jpeg" srcset="prod-800.jpg 800w, prod-1200.jpg 1200w" sizes="90vw"></source>
• 注意：服务器返回的Content-Type必须是image/webp，否则Chrome会标记为blocked:mime-type

sizes必须和CSS实际占位一致

很多画廊里图片宽度随容器变化（比如网格中每列占33.33%），但sizes写成"100vw"会导致高清屏选错源：

• 如果CSS中图片父容器是width: calc(100% / 3 - 1rem)，那sizes就得写"(max-width: 768px) 100vw, 33vw"
• 否则浏览器算不出需要多宽的像素，srcset里的800w可能被当成800px，2x屏反而加载小图
• 兜底的也得带sizes和srcset，它不是摆设，而是所有规则都不匹配时的最后选择

别混用media和srcset逻辑

一个里既写media又写含x描述符的srcset，浏览器直接跳过——因为media管“在哪种屏幕宽度下用”，srcset里的x管“同一宽度下按DPR选哪张”，二者层级不同：

• 想适配Retina屏？去掉media，只用srcset="prod.jpg 1x, prod@2x.jpg 2x" + sizes="100vw"
• 想按宽度换构图？每个只用media + w描述符srcset，x留给兜底的处理
• 真要同时兼顾？用多个分宽度，每个内部再用x描述符细化DPR

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