我可以使用modernizr有條件地加載背景css圖像嗎？

Question

我想在不同的設備寬度上使用不同大小的圖像，有時甚至沒有圖像以節省移動用戶的帶寬。

將它的工作像預期的是這樣的：

Modernizr.load([{ 
    test: 1025 > window.screen.width, 
    yep: "mobile.css", 
    nope: "desktop.css" 
}]); 

我也發現以下純CSS的解決方案，據稱工作，如果需要將只加載圖片：

<div id="test3"> 
    <div></div> 
</div> 
#test3 div { 
    background-image:url('images/test3.png'); 
    width:200px; 
    height:75px; 
} 
@media all and (max-width: 600px) { 
    #test3 { 
     display:none; 
    } 
} 

或

<div id="test5"></div> 
@media all and (min-width: 601px) { 
    #test5 { 
     background-image:url('images/test5-desktop.png'); 
     width:200px; 
     height:75px; 
    } 
} 
@media all and (max-width: 600px) { 
    #test5 { 
     background-image:url('images/test5-mobile.png'); 
     width:200px; 
     height:75px; 
    } 
} 

該解決方案的來源： http://timkadlec.com/2012/04/media-query-asset-downloading-results/

但其相當複雜。

簡單地使用modernizr加載設置背景圖像的所有css而不加載多個圖像版本是一個好主意嗎？

Answer 1

概括地說，是的，它會按照您所描述的方式工作。

Modernizr的

您可以使用Modernizr的加載javascript和CSS，而且使用Modernizr.mq()法爲特別地匹配媒體查詢。例如：

Modernizr.load([{ 

    // Test if media query matches 
    test : Modernizr.mq('only screen and (max-width: 600px)'), 

    // load css and js purely for mobile 
    yep: ['/assets/mobile.css', '/assets/mobile.js'] 

    }]); 

如果你有兩個媒體查詢（桌面和移動），那麼你只是測試都和加載所需的資產 - 或 - 改變上述包括以下，因爲它止跌」牛逼符合測試條件：

nope: ['/assets/desktop.css', '/assets/desktop.js'] 

使用Modernizr的（或任何其他資產裝載機爲此事），以fullfil 所有的JS/CSS資產負荷只能由你和知識來做出決定：

• 您的應用程序有多複雜。
• 需要多少資產（圖片，腳本，功能等）。
• 複雜/交互
• 如果使用Modernizr的
• 您的應用程序的使用目的，你會保存什麼/網站

的水平有什麼不對媒體查詢？

如果您的網站/應用程序的佔用空間不那麼大，那麼單獨使用媒體查詢來適應不同設備類型的佈局（更重要的是體驗）沒有任何問題;事實上，這是一種更簡單的方法，不那麼複雜，更符合響應式設計理論。

This is one example [不隸屬關係]爲不同的設備類型換出不同的圖像。只需調整瀏覽器大小並查看圖像的加載方式。

在使用媒體查詢，簡單地來說，你既可以：

包含在一個樣式表的媒體查詢：

@media only screen and (max-width: 600px) { 
    #test5 { 
     background-image:url('images/mobile.png'); 
     width:200px; 
     height:75px; 
    } 
} 
@media only screen and (min-width: 601px) { 
    #test5 { 
     background-image:url('images/desktop.png'); 
     width:200px; 
     height:75px; 
    } 
} 

或者鏈接到單獨的CSS文件：

<link rel="stylesheet" type="text/css" media="screen and (max-width: 600px)" href="mobile.css" /> 
<link rel="stylesheet" type="text/css" media="screen and (min-width: 601px)" href="desktop.css" /> 

或使用@import：

@import url(mobile.css) (max-width:600px); 
@import url(desktop.css) (min-width:601px); 

您可以在行動here中看到一個簡單示例@import。

其他方法

存在使用evenListeners監聽屏幕寬度的變化，可以加載其他更復雜的方法/卸載根據查詢狀態的改變劇本，但對於絕大多數的項目，他們是矯枉過正。