具有SRCSET和SIZES屬性的響應式和視網膜化身

我需要一個移動設備上的30x30和平板電腦/臺式機上40x40的頭像圖像。對於非視網膜和視網膜屏幕，它也必須是@ 1x和@ 2x尺寸。具有SRCSET和SIZES屬性的響應式和視網膜化身

我想這個代碼：

<img 
    srcset="mobile.jpg  30w, 
      desktop.jpg 40w, 
      [email protected] 60w, 
      [email protected] 80w 
      " 
    sizes="(min-width: 768px) 40px, 30px" 
    src="desktop.jpg" 
>

它完全在Firefox，Safari和邊緣。它在Opera中完全不起作用。在MacOSX上的Chrome中，只有運行開發人員工具時纔有效。在Windows上的Chrome中，它一直運行，直到我打開開發人員工具。

當我說它不起作用時，我的意思是瀏覽器總是會獲得最大的圖像。從另一面他們改變頁面上的大小正確。

所以我想知道的第一件事是我的代碼是正確的？也許我只是不明白，做錯了什麼？

謝謝。

UPD：我試圖創建小提琴或筆，但加載圖像時有一些麻煩。無論如何，這裏是一個鏈接：http://codepen.io/shchukin/pen/yJbaLA

來源

2016-06-30 Cypher

Chrome和Opera有一個源選擇算法，喜歡緩存的圖像候選人。這應該解釋，爲什麼你總是看到最大的加載。

關於您的一般用途。對於始終低於100像素的圖像，srcset沒有太大意義。 40像素和80像素之間的差異很小。簡單地給所有用戶一個60或80像素的圖像，它應該沒問題。

來源

2016-06-30 14:49:25

我們在說什麼樣的緩存？如果我用CTRL + F5或CMD + SHIFT + R刷新頁面，那麼最大的圖像仍然存在。但似乎我不得不相信。所以我的代碼是正確的？謝謝。 – Cypher

具有SRCSET和SIZES屬性的響應式和視網膜化身

回答

相關問題