具有多個最小寬度的vw和px值的srcset，哪些贏了，爲什麼？

Question

我的sizes屬性一直有問題。我剛纔問了a question關於你應該聲明哪個訂單的尺寸，並且Yoav說：

「你的尺寸值應該從最窄的斷點開始，然後逐漸移動到更寬的斷點，所以在你的情況下它應該是最小寬度：62.5em）25vw，（最小寬度：30em）50vw，100vw。

否則，如果你在視網膜屏幕上，屏幕的DPR也考慮到了，當弄清楚要選擇哪個圖像時「。

這是有道理的，但在這種情況下會發生什麼。假設你的移動設備的圖像是100vw，但容器上有max-width: 380px。我這樣做：

sizes="(min-width: 380px) 380px, 100vw"

隨着我這麼遠嗎？涼。在700px的佈局更改爲兩列，所以你希望圖像爲50vw。因此，我這樣做：

sizes"(min-width: 700px) 50vw, (min-width: 380px) 380px, 100vw"

然而，在技術上最小寬度：700像素的圖像是現在比所述最小寬度小：380px值，因爲二分之七百= 350像素，從而應的順序現在是：

sizes"(min-width: 380px) 380px, (min-width: 700px) 50vw, 100vw"？

然後在1,024像素的佈局更改至3列，並在1200像素外容器停止從擴大更多的佈局，所以我想是這樣的：

sizes"(min-width: 1220px) 380px, (min-width: 1024px) 33vw, (min-width: 700px) 50vw, (min-width: 380px) 380px, 100vw"

這是正確的嗎？

Answer 1

順序取決於媒體查詢值和「方向」（最小寬度或最大寬度）。圖像的實際大小並不重要。

在您的例子：

sizes"(min-width: 380px) 380px, (min-width: 700px) 50vw, 100vw" 

(min-width: 700px) 50vw將永遠不會被使用，因爲瀏覽器停止讀取時找到的第一個有效的媒體查詢。

這裏，例如800px的視口爲min-width: 380px爲真，因此它停在那裏。

如果你想多寫移動第一，試試這個（與max-width）：

sizes"(max-width: 380px) 100vw, (max-width: 700px) 380px, 50vw" 

，因爲我們寫的移動第一個CSS與min-width媒體查詢它的直覺。

HTH