srcset与sizes是html5原生响应式图片最佳方案：sizes按实际布局断点声明图片占位宽度，srcset提供多分辨率资源，浏览器自动匹配最适图片。
电商商品列表要实现响应式图片加载，srcset 和 sizes 是 HTML5 原生最可靠、无需 JS 就能工作的方案。关键不是堆分辨率，而是按视口宽度和布局尺寸精准匹配图片资源。
先搞懂 sizes 怎么写才对
sizes 的作用是告诉浏览器：「在不同断点下，这张图片最终会占多宽」。它不是指定图片尺寸，而是提供布局上下文，让浏览器从 srcset 中选最合适的图源。
- 常见错误：写成
sizes="100vw"—— 这只适用于全宽图，商品列表里每列宽度随屏幕变化，必须按实际布局来 - 正确示例（4列栅格，有边距）：
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33.33vw"
含义：小屏单列占满；中屏双列（约50vw）；大屏三列（每列≈1/3视口宽） - 如果用 CSS Grid 或 Flex 实现自适应列数，建议用媒体查询对应写
sizes，别依赖 JS 计算
srcset 要按「展示尺寸 + 像素密度」双维度提供
srcset 不只是放一堆 320w、640w…… 还得考虑设备像素比（DPR），尤其 iOS 和安卓高分屏。
- 推荐组合写法：
srcset="img-320.jpg 320w,<br> img-640.jpg 640w,<br> img-960.jpg 960w,<br> img-1280.jpg 1280w"<br> sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33.33vw" - 这样浏览器会结合
sizes算出「需要的渲染宽度」，再选最接近且不小于该宽度的资源（比如 375px 宽屏幕 + DPR=2 → 需要 ~750px 宽图片 → 选img-960.jpg） - 不必为每个 DPR 单独列
x单位（如img@2x.jpg 2x），w描述符更灵活，兼容性更好
电商列表的实用技巧
商品卡片常有固定宽高比、懒加载、骨架屏等场景，需微调策略：
- 保持宽高比：CSS 用
aspect-ratio: 1 / 1或 padding-bottom hack，sizes仍按宽度写，浏览器会自动缩放，不影响 srcset 选择 - 懒加载配合：
loading="lazy"可直接加在<img>上，现代浏览器原生支持，和srcset完全兼容 - 首屏优化：关键商品图可保留
src属性（填最小可用图），避免无图空白；非首屏用data-srcset+ JS 补充，但纯 HTML 方案优先用原生 lazy - CDN 动态图处理：后端可生成 320/640/960/1280 四档，命名规则统一，前端模板直接拼接，避免硬编码路径
验证是否生效
别只看页面效果，要用浏览器开发者工具确认：
- 在 Network 面板过滤
Img，刷新不同宽度，观察加载的是哪张图 - Elements 面板选中
<img>，右键 → “Reload frame” 或调整窗口大小，看currentSrc是否变化 - 用 Device Toolbar 模拟 iPhone SE / iPad / Desktop，对比加载体积差异（目标：小屏 ≤50KB，大屏 ≤120KB）
不需要框架、不依赖 JS、不增加首屏负担，srcset + sizes 就是电商列表响应式图片的黄金组合。核心就一条：sizes 必须真实反映布局宽度，srcset 提供足够覆盖的宽度档位，其余交给浏览器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
