css - cssメディアセレクターを使用する場合、標準画像と高解像度画像の両方がRetinaディスプレイに読み込まれますか？

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。