真响应式需用srcset+sizes，仅max-width:100%是假响应式；srcset易因框架插值错误、ssr漏传sizes、旧版浏览器兼容问题及动态插入时机不当而失效；须严格按顺序书写且media/type校验严谨；动态图片需防错图、保语义、控布局。
动态网页中用 srcset + sizes 才算真响应式，只靠 max-width: 100% 是假响应式——图片照常下载大尺寸资源，用户带宽白耗、首屏卡顿。
为什么 srcset 在动态渲染时经常失效
Vue/React 等框架里直接插值写 srcset 字符串，容易漏掉空格或引号导致语法错误；更常见的是服务端渲染（SSR）漏传 sizes，浏览器直接退化为只加载 src。
-
sizes是字符串，不是 CSS，不支持calc()，但必须严格匹配真实布局断点——比如栅格占 1/3 宽，sizes就得是"(max-width: 768px) 100vw, 33.33vw"，不能硬写"100vw" - 旧版 Safari（12.1 之前）和部分 EdgeHTML 对
w描述符解析不稳定，混用480w和2x会让整个srcset被忽略 - 动态插入的
img元素，若在 DOM ready 前就触发加载（如 SSR 输出后立即执行 JS），srcset可能来不及参与资源选择
<picture></picture> 在动态组件里怎么写才不被跳过
<picture></picture> 不是可选优化项，而是艺术方向或格式降级的刚需解。但它对结构和顺序极其敏感，写错一行就全失效。
-
<source></source>必须放在<img>之前，且<img>是唯一闭合标签——顺序反了或多了嵌套，浏览器直接忽略所有<source></source> -
media和type是 AND 关系：<source media="(max-width: 480px)" type="image/webp" srcset="face.webp"></source>若拼错type（如多写分号或大小写错误），该<source></source>被跳过 - 媒体查询里有空格（如
(max-width: 768px)）会导致旧版 Edge 解析失败，建议写成(max-width:768px)避免兼容性陷阱
动态加载图片时如何防错图+保语义
异步加载、懒加载、骨架屏场景下，图片可能加载失败或延迟渲染，但 alt 和语义结构不能丢。
- 每个
<img>加onerror="this.src='placeholder.svg'; this.title='加载失败: '+this.src;"，开发阶段快速定位路径问题 - 批量监听用
document.querySelectorAll('img').forEach(img => img.addEventListener('error', ...))，避免重复绑定 - 用
<figure></figure>包裹动态图片和<figcaption></figcaption>，即使 JS 渲染失败，HTML 仍保持语义正确；别让<figcaption></figcaption>直接跟<img>并列，它默认块级会换行，需用display: inline-block或flex控制
Flex/Grid 容器中图片缩不进去的隐藏开关
动态布局常套在 display: flex 或 display: grid 容器里，此时图片默认 min-width: auto 会卡住收缩逻辑，导致 max-width: 100% 失效。
- 必须显式加
min-width: 0，否则哪怕写了width: 100%也缩不进窄容器 - 父容器没设明确宽高时，
object-fit完全不生效——别指望它救变形，先确保父级有width和height或aspect-ratio - CSS Grid 布局推荐用
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))+gap，比flex-wrap更稳，尤其图片尺寸不一致时
最麻烦的从来不是写对语法，而是 CSS 布局变了但 sizes 没同步更新，或者 srcset 提供的宽度候选值和实际渲染宽度不匹配——浏览器算出来的目标像素和你给的 480w 差 1px，它就可能选错图甚至回退到 src。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
