媒體查詢下載

Question

如果我使用媒體查詢定義使用根據瀏覽器的大小不同的圖像，比如我的背景：

@media (min-width:1440px){div.container{background:URL('bg1440.png');}} 
@media (min-width:960px){div.container{background:URL('bg960.png');}} 
@media (min-width:480px){div.container{background:URL('bg480.png');}} 

，這是我的div結構：

<div class="outerwrap"> 
    <div class="innerwrap"> 
    <div class="container"> 

容器班級是持有背景圖片的人。

瀏覽器只會請求相關圖片還是會請求所有圖片？

如果我打開瀏覽器並調整它的大小，比如說從1440到960，媒體查詢是否會請求兩個相關圖像，還是會請求所有圖像？

如果它下載所有圖像，我應該怎麼做才能解決這個問題？

謝謝。

Answer 1

這取決於瀏覽器和平臺。

此刻，most browsers will download the needed background image only。

請注意，對於其他媒體，行爲可能會不同（包括不是背景圖像的圖像）。