html圖片元素不支持小型媒體查詢

Question

我有這樣的事情：

<picture>
  <source media="(min-width:1200)" srcset="big.jpg">
  <source media="(min-width:840)" srcset="small.jpg">
  <img srcset="big.jpg" alt="Test" />
</picture>

我也在使用picturefill 。

我的問題是，firefox和chrome（我目前正在測試的2）都將僅加載big.jpg，即使在小屏幕上也是如此。 還檢查了控制台的網絡跟蹤。

我的CSS將img設置為基本流體：

img{
  display: block;
  max-width: 100%;
  height:auto;
}

那么我的代碼有什么問題呢？

Answer 1

至於哈茲·科德的評論，答案是：我的代碼在媒體查詢中缺少單元聲明。

至於完整性，我在這里還為我的用例編寫了一個更好的代碼：為小屏幕設置一個默認圖像，並且從840px開始使用另一個圖像。

<picture>
  <source media="(min-width:840px)" srcset="big.jpg">
  <img srcset="small.jpg" alt="Foradori">
</picture>

這將正常工作，並且僅下載當前斷點的正確映像。 還記得我們需要picturefill確保跨瀏覽器的支持。