Retina屏图片模糊的根源是浏览器未选择匹配设备像素比（DPR）的高分辨率版本，正确解法是使用srcset配合x描述符；当图片尺寸固定且仅需适配DPR时，x描述符比w更简洁可控，需提供1x/2x/3x等整数倍像素图并显式声明1x，同时保留src兜底。
Retina 屏上图片模糊？不是图片不够大，而是浏览器没选对分辨率版本——srcset 配合 x 描述符才是最直接的解法。
什么时候该用 srcset + x 而不是 srcset + w
当你的图片在页面中尺寸固定（比如 logo 宽高写死为 120px × 60px），且只关心设备像素比（DPR），不涉及响应式布局宽度变化时，x 描述符更简洁、更可控。
-
x描述符按设备 DPR 匹配：1x对应普通屏，2x对应 Retina，3x对应 iPhone 14 Pro 等高 DPR 设备 -
w描述符按视口宽度匹配，需配合sizes属性，适合流体布局中的图片（如文章配图占满容器宽度） - 混用
x和w在同一srcset中是无效的，浏览器会直接忽略整个属性
srcset 的 x 值怎么写才生效
必须确保所有候选图片的实际像素尺寸是目标显示尺寸的整数倍，否则高 DPR 下仍可能拉伸模糊。
- 假设页面中
<img width="120" height="60">，那么应提供：
–logo-120x60.png（标为1x）
–logo-240x120.png（标为2x）
–logo-360x180.png（标为3x） -
srcset写法：srcset="logo-120x60.png 1x, logo-240x120.png 2x, logo-360x180.png 3x" - 不要省略
1x—— 某些旧版 Safari 在缺失1x时会 fallback 到src，而非默认选第一个 -
src属性仍需保留，作为所有不支持srcset的浏览器兜底
常见失效原因和调试方法
图片依然模糊？大概率不是代码写错，而是资源或环境没对齐。
立即学习“前端免费学习笔记（深入）”；
- 检查实际加载的图片：右键「检查元素」→「Network」标签页 → 找到图片请求 → 看
Request URL是否为2x版本；不是？说明 DPR 检测失败或资源未命中 - 确认设备 DPR：在控制台运行
window.devicePixelRatio，MacBook Pro 是2，iPhone 13 是3，Windows 普通屏通常是1 - Chrome 模拟器里开启 “Device Pixel Ratio” 设置（三点菜单 → More Tools → Rendering → Emulate DPR），别只切设备型号
- CDN 或代理可能改写
Accept头或缓存了低分图，加个时间戳参数临时绕过：logo-240x120.png?v=2
真正容易被忽略的是：DPR 不等于缩放比例。系统设置里把 macOS 显示缩放调成“更大字体”，devicePixelRatio 还是 2，但布局可能已重排——这时候固定 width/height 的 x 方案反而比流体 w 更稳。但凡图片尺寸会随容器变化，就得切回 w + sizes。
