css - 使用 css 媒体选择器时，视网膜显示器上是否同时加载了标准和高分辨率图像？

Question

我正在使用下面显示的 CSS 为“视网膜”显示器提供高分辨率图像。标准和高分辨率图像是否都加载到“视网膜”显示设备上？或者只是高分辨率图像？

.icon {
  background-image: url(example.png);
}

@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
  .icon {
    background-image: url(example@2x.png);
  }
}

Answer 1

最后一页仅使用高分辨率图像。首先加载整个 CSS 样式表，然后浏览器确定它实际需要显示的内容。引用高分辨率图像的 @media 查询将覆盖视网膜设备的 .icon 的原始实例。