先记住这个答案
resolution 查询的是输出密度，2dppx 相当于每个 CSS 像素约对应两个设备像素，适合选择清晰度不同的背景图。普通内容图片更适合交给 srcset，因为浏览器还要综合实际显示宽度与候选资源。把高密度图片无条件发给所有屏幕会浪费下载量。
- 标准查询使用
resolution 2dppx不等于两倍视口宽- 内容图片优先考虑
srcset - 高密度位图不必放大 CSS 尺寸
高密度背景图保持相同显示尺寸
品牌 logo 用 CSS 背景图，普通资源在高密度屏幕上发虚。可以在 @media (min-resolution: 2dppx) 下换高密度素材，但 CSS 中显示尺寸保持相同，让更密的像素用于细节。若是内容图片，<img> 配 srcset 更合适，浏览器可以同时考虑布局尺寸、像素密度和下载策略。不要把设备像素比当成视口宽度，它们回答的是不同问题。
.logo {
width: 120px; height: 40px;
background: url("/logo.png") center / contain no-repeat;
}
@media (min-resolution: 2dppx) {
.logo { background-image: url("/logo@2x.png"); } /* 显示尺寸不变 */
}1dppx 相当于 96dpi，但实际资源选择不应只靠这个换算。
示例中 .logo 的 CSS 显示尺寸始终是 120×40，替换的是背景文件，而不是把盒子放大两倍。若 logo@2x.png 的源像素是 240×80，background-size: contain 会把它缩进同一盒子。开发者常误以为“2 倍图”就该把 CSS 宽高也乘二，结果页面图标变大；实际要保持布局尺寸，增加的是源文件的采样密度。
resolution 描述像素密度
浏览器页面缩放、设备设置和输出介质都可能改变媒体特性的结果；更重要的是图片是否有足够的源像素覆盖它在页面中的 CSS 尺寸。密度描述符如 2x 放在 srcset 中是候选资源声明，由浏览器选择，和强制命中某条 CSS 背景规则不同。对于矢量图，SVG 往往能避开多份位图的维护。
显示尺寸与文件像素尺寸要分开看：CSS 把背景画成 100×100 CSS 像素时，密度为 2 的屏幕可使用 200×200 像素文件，使细线和文字不易发虚。若文件本身只用于大面积渐变或没有高频细节，盲目上高分辨率版本可能只增加下载量。还应看压缩格式与文件体积，而不是只看像素倍数。
容易答错的地方
- 把
2dppx当成两倍视口宽 - 它描述分辨率密度，不是页面有多少 CSS 像素宽。
- 给高密度图同时放大 CSS 宽高
- 高密度资源通常在相同 CSS 显示尺寸下提供更多源像素，不应把布局尺寸也加倍。
面试官还会怎么问？
dppx 与 dpi 怎样换算？
在 CSS 分辨率单位里，1dppx 等于 96dpi；选择资源时仍要看图片实际显示尺寸。
内容图片为什么更推荐 srcset？
浏览器可结合候选资源、布局宽度和屏幕密度选图，不需手写很多背景媒体查询。
SVG 还需要 2x 版本吗？
普通矢量图可按显示尺寸栅格化，通常不需要为了像素密度再做一份位图式的 2x 文件。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。