媒體最大寬度與最小寬度，偏移 1 px

Question

使用max-width vs min-width時正確的設置是什么

max-width(99px) and min-width(100px) （那么之間的1px呢？）或max-width(100px) and min-width(100px) （這里將應用到100px ？）

Answer 1

如果你打算在特定元素上使用media-queries並同時定位max和min-width ，你應該為每個元素使用相同的像素值。 例如min-width: 800px當屏幕寬度超過 800px 時指定 styles。 max-width: 800px指定 800px 及以下的樣式變化。 對兩個查詢使用相同的值可確保執行指定的 styles。

因此，在您的示例中，之間的1px不會成為一個因素，因為99和100px之間沒有像素，並且您為兩者指定了 styles。 如果您使用798px而不是 799，則會有1px ，其中元素默認為非媒體 styles（如果有）。

注意：如果在800px時使用相同的值， max-width styles 將優先於min-width styles。

 @media only screen and (min-width: 800px) { img { width: 100vw; height: 100vh; } } @media only screen and (max-width: 800px) { img { width: 50vw; height: 50vw; }.img { height: 100vh; display: flex; align-items: center; justify-content: center; } }

 <div class="img"> <img src="https://dummyimage.com/600x400/000/fff"> </div>