只写 srcset="icon@2x.png 2x" 最简有效，但必须配 src 作 fallback，且仅适用于固定尺寸图标/按钮类图片；1x/2x/3x 描述符专用于渲染宽度固定的场景（如 logo、头像），浏览器依据 devicepixelratio 选择对应资源，sizes 属性在此完全无效。
直接结论：只写 srcset="icon@2x.png 2x" 是最简有效方案，但必须配 src 作 fallback，且仅适用于固定尺寸图标/按钮类图片。
什么时候用 1x/2x/3x 描述符？
适用场景非常明确：图片在页面中渲染宽度固定（比如 logo 宽 120px、头像宽 48px），你只为不同设备像素比（DPR）提供多份资源，不随视口宽度变化。
- 浏览器只看
devicePixelRatio值：DPR=2 就选2x图，DPR=3 就选3x图 -
sizes属性此时**完全无效**——加了也 ignored，别写 - 常见错误：给 banner 图写
srcset="banner@2x.jpg 2x"，结果小屏手机也加载了大图——因为 banner 渲染宽度不固定，该用w描述符
srcset 里写 2x 却没生效？检查这三点
不是浏览器不认，而是条件没满足。
-
src必须存在：src="icon.png"是降级兜底，缺失会导致老浏览器白屏或现代浏览器 fallback 到空图 - 文件名和路径必须真实存在：
icon@2x.png404？构建工具（Vite/Webpack）默认不自动补@2x后缀，得靠插件（如vite-plugin-imagemin）或自定义resolve.alias - 别混淆 DPR 和分辨率：iPhone 15 Pro 的 DPR=3，但屏幕宽度才 430px；
2x不代表“给 iPhone 用”，而是“给所有 DPR≥2 的设备用”
固定尺寸图标怎么写才稳？
典型例子：导航栏里的设置图标，CSS 设定为 width: 24px; height: 24px;，那就按实际像素提供资源。
- 准备三张图：
setting.png（24×24）、setting@2x.png（48×48）、setting@3x.png（72×72） - HTML 写法：
<img src="setting.png" srcset="setting.png 1x, setting@2x.png 2x, setting@3x.png 3x" alt="设置"> - 关键点：
src指向 1x 图，既是 fallback，也是 DPR=1 时的主图；浏览器不会缩放图片，它只选源，渲染尺寸仍由 CSS 控制
真正容易被忽略的是：高分屏适配不只是图片。如果页面里有 <canvas></canvas> 或自绘图形，window.devicePixelRatio 必须参与 canvas 缩放计算，否则再高清的 @2x 图也救不了模糊的线条。单靠 srcset 只解决了一半问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
