html图片分辨率不一样如何自适应

要让图片在retina屏和普通屏都清晰，需配合使用srcset（提供多分辨率候选）和sizes（声明图片在页面中的实际宽度），并确保w值覆盖sizes计算出的最大宽度，否则回退到src。

图片 srcset 和 sizes 怎么配才不糊

直接看效果：同一张图在 Retina 屏和普通屏上都清晰，关键不是靠 js 算分辨率，而是让浏览器自己选最合适的资源。核心是 srcset 提供多档宽高比 + 像素密度候选，sizes 告诉浏览器“这张图在页面里实际占多宽”。

常见错误是只写 srcset 不写 sizes，结果浏览器默认按 100vw 选图，明明图只占 300px 宽，却加载了 2000px 的大图。

• srcset 里每个值必须带单位："img-400w.jpg 400w"（按宽度）或 "img-2x.jpg 2x"（按设备像素比）
• sizes 是媒体查询语法，比如 sizes="(max-width: 768px) 100vw, 300px" —— 表示小屏下占满视口，大屏下固定 300px 宽
• 所有 srcset 中的 w 值要覆盖 sizes 可能算出的最大宽度，否则 fallback 到 src

用 picture 元素做艺术指导时，media 查询怎么写才不冲突

当需要为不同屏幕尺寸切换完全不同的构图（比如横图切竖图），picture 是唯一靠谱方案。但很多人把 media 写成 (min-width: 768px)，结果在 768px 边界反复抖动——因为浏览器在宽度变化时可能多次重排，而 media 不是精确匹配，是“满足即用”。

• 用 max-width 更稳，比如 <source media="(max-width: 767px)" srcset="mobile.jpg"></source>，避免临界点模糊
• 所有 <source></source> 必须按从窄到宽顺序排列，浏览器从上往下匹配，第一个命中就停
• 最后一定要有 <img src="fallback.jpg" alt="html图片分辨率不一样如何自适应" >，这是必填 fallback，没它整个 picture 失效
• 不要指望 media 能识别 DPR，DPR 判断只能靠 srcset 里的 x 单位

CSS background-image 自适应为什么总糊

CSS 背景图不走 srcset，浏览器无法根据 DPR 或视口动态换源，全靠你手动控制。最常踩的坑是用了 background-size: cover 却只提供一张 1x 图，高 DPR 设备直接拉伸模糊。

立即学习“前端免费学习笔记（深入）”；

• 必须配合媒体查询提供多套背景图：@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)
• 路径别偷懒，url(img/bg@2x.jpg) 和 url(img/bg.jpg) 是两份独立文件，不能靠后端自动加 @2x
• background-size 用具体值（如 100% 100%）比 cover 更可控，尤其当容器宽高比不确定时
• 如果用 WebP + fallback，得用 <picture></picture> 包裹内联 SVG 占位，纯 CSS 无法做格式降级

服务端返回不同分辨率图时，Content-Type 和缓存头容易漏哪几项

CDN 或 Node.js 吐图时，光改文件名或路径不够，浏览器靠响应头判断是否可缓存、是否支持 WebP。漏掉关键头，会导致重复请求、低 DPR 设备加载高分辨率图、甚至被代理缓存污染。

• 必须返回准确的 Content-Type：image/webp、image/avif，不能是 image/jpeg 伪装
• Vary: Accept, DPR（如果后端真读了 DPR 请求头），否则 CDN 可能把 2x 图缓存后返回给 1x 用户
• Cache-Control: public, immutable 对静态图有效，但千万别对带参数的 URL（如 ?dpr=2）设太长缓存，DPR 参数可能被忽略
• 如果用 Accept: image/webp 降级，注意 safari 旧版不发这个头，得靠 User-Agent 做兜底判断

真正难的不是写对某一行代码，而是理解「浏览器什么时候决定加载哪张图」——它看的是 srcset + sizes + 当前布局宽度 + 设备 DPR + 缓存状态，四个变量同时起作用。少一个条件，就可能在某个机型上糊。