我正試圖在我正在開發的當前網站上支持各種像素比例。我還想確保提供任何必需的瀏覽器前綴，以便在合理範圍內支持最廣泛的各種設備/瀏覽器。另外，我儘可能使用SVG，但我需要一個用於攝影圖像的解決方案。理想情況下，我想提供：@ 2x，@ 3x和@ 4x圖像的媒體查詢

@ 1X圖像（像素比1.0）
@ 2倍的圖像（的1.25+像素比）
@ 3倍的圖像（的2.25+像素比）
@ 4倍的圖像（的3.25+像素比）

我的問題是什麼是去寫的媒體查詢來實現這一目標的最佳方式是什麼？我主要關心的是，我的論點對於我想實現的目標是正確的。我會很感激你的任何建議或建議。目前，我的代碼如下：

/* @1x Images (Pixel Ratio 1.0) */ 
#dgst_shopping_bag {background-image:url(img/shopping_bag.png);} 

/* @2x Images (Pixel Ratio of 1.25+) */ 
@media only screen and (-o-min-device-pixel-ratio: 5/4), 
     only screen and (-webkit-min-device-pixel-ratio: 1.25), 
     only screen and (min-device-pixel-ratio: 1.25), 
     only screen and (min-resolution: 1.25dppx) { 
    #dgst_shopping_bag {background-image:url(img/[email protected]);} 
} 

/* @3x Images (Pixel Ratio of 2.25+) */ 
@media only screen and (-o-min-device-pixel-ratio: 9/4), 
     only screen and (-webkit-min-device-pixel-ratio: 2.25), 
     only screen and (min-device-pixel-ratio: 2.25), 
     only screen and (min-resolution: 2.25dppx) { 
    #dgst_shopping_bag {background-image:url(img/[email protected]);} 
} 

/* @4x Images (Pixel Ratio of 3.25+) */ 
@media only screen and (-o-min-device-pixel-ratio: 13/4), 
     only screen and (-webkit-min-device-pixel-ratio: 3.25), 
     only screen and (min-device-pixel-ratio: 3.25), 
     only screen and (min-resolution: 3.25dppx) { 
    #dgst_shopping_bag {background-image:url(img/[email protected]);} 
}

選擇1：我一直在考慮利用<picture>標籤來做到這一點。我知道您可以爲不支持<picture>的瀏覽器提供替代內容，這是我使用它的主要關注點。你們認爲這是提供多像素比例照片的最佳做法嗎？

來源

2015-02-06 Mastrianni

簡短的問題：你們的圖像上的所有設備都相同的寬度？ – 2015-02-26 10:18:09

對於大多數設備，圖像尺寸是相同的。我只是換出高像素密度顯示器的資產。但是對於較低的斷點，由於屏幕尺寸限制，某些圖像尺寸較小。 – Mastrianni 2015-02-26 18:49:27

好吧，忽略背景圖像和嵌入圖像元素（如picture）之間的明顯功能差異，這兩者之間有一些優缺點。

優點爲`background-image`用於在線圖像/缺點：

沒有辦法使用媒體查詢了一種直列式，所以指定background-image需要宣佈爲任何元件需要背景圖像選擇器從所述標籤分離。這使動態創建的元素的解決方案變得複雜。另外，如果您只對使用不同像素比率的圖像提供服務感興趣，則只需使用srcset attribute of an img tag而不是picture元素即可。 picture元素需要更多標記，並且有一些對此不必要的特性，再加上srcset的支持稍好。

優點爲內嵌圖像`background-image` /缺點：

基於分辨率的媒體查詢are much better supported比the picture element和the srcset attribute。某些瀏覽器目前不支持picture元素或srcset屬性，儘管支持正在改進。順便說一下，如果您想最大限度地利用瀏覽器對16歲以下版本Firefox的支持，則可以添加the min--moz-device-pixel-ratio selector，其語法與-webkit-min-device-pixel-ratio相同。這裏是一個使用你的CSS的例子。

/* @2x Images (Pixel Ratio of 1.25+) */ 
@media only screen and (-o-min-device-pixel-ratio: 5/4), 
     only screen and (-webkit-min-device-pixel-ratio: 1.25), 
     only screen and (min--moz-device-pixel-ratio: 1.25), 
     only screen and (min-device-pixel-ratio: 1.25), 
     only screen and (min-resolution: 1.25dppx) { 
    #dgst_shopping_bag {background-image:url(img/[email protected]);} 
}

最佳做法？

最佳做法是對需要背景圖像的地方使用媒體查詢，對於需要內嵌圖像的地方使用srcset或picture。然而在這一點上，考慮你需要支持哪些瀏覽器可能更重要。爲此，請參閱兼容鏈接（可能是考慮到許多人使用舊的瀏覽器很可能也採用標準分辨率顯示器）：

來源

2015-02-25 18:26:40

真正使用的img[srcset]屬性。在另一個答案中，它的支持比狀態好得多。目前的Chrome 和 Safari確實支持這個屬性。而我們知道，Firefox 38和IE 12也會支持它。此外，該語法允許您執行簡單的漸進式增強，並且不需要編寫複雜的媒體查詢。

這是它的樣子：

<img src="img/[email protected]" srcset="img/[email protected] 2x, img/[email protected] 3x" />

而如果你想支持添加到非支持的瀏覽器，你可以different polyfills之間進行選擇。

如果您使用填充工具，你可以標記改成這樣：

<img srcset="img/[email protected], img/[email protected] 2x, img/[email protected] 3x" />

來源

2015-02-25 23:00:58

更大的圖像和比例的原因是因爲蘋果最新的視網膜顯示屏（在iPhone 6上）需要3x圖像，他們也有一個市場上的4k顯示器的iMac。 4x圖像僅僅是我對4k顯示器的不太遙遙無期的證明。圖像也被壓縮。 – Mastrianni 2015-02-26 01:38:25

@ 2x，@ 3x和@ 4x圖像的媒體查詢

回答

優點爲background-image用於在線圖像/缺點：

優點爲內嵌圖像background-image /缺點：

最佳做法？

相關問題

優點爲`background-image`用於在線圖像/缺點：

優點爲內嵌圖像`background-image` /缺點：