使用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实例。