srcset 与 sizes 协同生效：sizes 定义视口宽度条件下的目标显示宽度，浏览器据此结合设备 DPR 从 srcset 的 w 值中选取最匹配图片；必须配对使用，且 sizes 需含媒体条件与宽度描述符，srcset 中须统一用 w 单位。
img 标签的 srcset + sizes 属性怎么配才生效
浏览器是否按屏幕密度或视口宽度加载对应图片，取决于 srcset 和 sizes 是否协同正确。只写 srcset 不写 sizes，浏览器会默认按 100vw 计算，容易在窄屏下仍加载大图。
关键点：
-
sizes值必须是媒体条件 + 宽度描述符的组合，例如(max-width: 768px) 100vw, 50vw，不能只写100vw -
srcset中每个图像后必须带w单位（如small.jpg 480w），不能混用x（如2x）和w，除非你明确只适配设备像素比 - 浏览器按
sizes计算出「目标显示宽度」，再结合设备 DPR，从srcset中选最接近的w图像
<img
src="fallback.jpg"
srcset="photo-480.jpg 480w,
photo-800.jpg 800w,
photo-1200.jpg 1200w"
sizes="(max-width: 479px) 100vw,
(max-width: 768px) 50vw,
33vw"
alt="响应式示例">
picture 元素中 source 的 media 属性匹配逻辑
<picture> 适合做「艺术方向裁剪」或「格式降级」，比如小屏用裁剪版、大屏用完整构图，或优先加载 webp，不支持时回退到 jpg。它的匹配是「从上到下第一个满足 media 的 <source>」，后续不再判断。
常见陷阱：
立即学习“前端免费学习笔记（深入）”；
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
-
media是 CSS 媒体查询语法，不是 JS 表达式，不能写media="width < 768px" - 必须有兜底的
<img>标签，否则无图显示（且该<img>不参与响应式选择，仅作 fallback） -
type属性必须是标准 MIME 类型，如image/webp，写成webp或.webp会失效
<picture> <source media="(max-width: 768px)" srcset="photo-mobile.webp" type="image/webp"> <source media="(max-width: 768px)" srcset="photo-mobile.jpg" type="image/jpeg"> <source srcset="photo-desktop.webp" type="image/webp"> <img src="photo-desktop.jpg" alt="主图"> </picture>
如何验证浏览器实际加载了哪张图
靠肉眼或文件名判断不可靠——浏览器可能因缓存、网络条件、用户设置（如“节省数据”模式）跳过高分辨率资源。真实加载路径必须查 Network 面板。
操作建议：
- Chrome DevTools 中打开 Network → Filter 输入
img，刷新页面，看请求的 URL 和 Response Headers 中的content-length - 禁用缓存（勾选 Disable cache），避免旧资源干扰
- 用 Device Toolbar 切换不同预设尺寸（如 iPhone SE / iPad Pro），再刷新，观察 srcset 选择是否变化
- 在 macOS Safari 中可启用 Develop → Enter Responsive Design Mode，它会显示当前计算出的
sizes值
懒加载（loading="lazy"）与响应式图片能否共存
可以共存，但顺序和兼容性要注意：loading="lazy" 是 HTML 属性，不影响 srcset 逻辑，浏览器仍会在懒加载触发前完成资源选择。
需注意：
- 所有现代浏览器都支持
loading="lazy"，但 Safari 15.4+ 才开始支持对<img>的原生懒加载（旧版 Safari 会忽略该属性） - 不要在
<source>上加loading—— 它只对<img>有效 - 如果使用 JS 懒加载库（如 lazysizes），确保它读取的是
data-srcset而非srcset，否则原生响应式逻辑会被绕过
最简安全写法：
<img
src="placeholder.jpg"
srcset="photo-480.jpg 480w,
photo-800.jpg 800w"
sizes="(max-width: 480px) 100vw, 50vw"
loading="lazy"
alt="懒加载响应式图">
实际项目里最容易被忽略的是 sizes 的动态性——它写死在 HTML 里，一旦布局用 CSS Grid/Flex 改变图片容器宽度，sizes 就可能严重失准。这时候要么用 JS 动态改 sizes 属性，要么改用 container query 配合 image-set()（CSS 级方案，目前仅 Safari 17.4+ 支持）。 
