媒体最大宽度与最小宽度，偏移 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>