要让图片在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 设备直接拉伸模糊。
网页中拖动 DIV 是很常见的操作，今天就分享给大家一个 jQuery 多列网格拖动布局插件，和其它的插件不太一样的地方在于你处理拖放的元素支持不同大小，并且支持多列的网格布局，它们会自动的根据位置自己排序和调整。非常适合你开发具有创意的应用。这个插件可以帮助你将任何的 HTML 元素转换为网格组件
立即学习“前端免费学习笔记（深入）”；
- 必须配合媒体查询提供多套背景图：
@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 + 缓存状态，四个变量同时起作用。少一个条件，就可能在某个机型上糊。
