[英]Media max-width vs min-width , shift 1 px
what is right settings when using max-width vs min-width
使用
max-width vs min-width
时正确的设置是什么
max-width(99px) and min-width(100px)
(what about 1px
between then?) or max-width(100px) and min-width(100px)
(which will be applied for 100px
here? ) max-width(99px) and min-width(100px)
(那么之间的1px
呢?)或max-width(100px) and min-width(100px)
(这里将应用到100px
?)
If you're going to use media-queries
on a specific element and target both max
and min-width
, you should use the same pixel value for each.如果你打算在特定元素上使用
media-queries
并同时定位max
和min-width
,你应该为每个元素使用相同的像素值。 For example, the min-width: 800px
specify the styles when over 800px in screen width.例如
min-width: 800px
当屏幕宽度超过 800px 时指定 styles。 max-width: 800px
specifies the style changes on 800px and below. max-width: 800px
指定 800px 及以下的样式变化。 Using the same value for both queries insures that the specified styles are executed.对两个查询使用相同的值可确保执行指定的 styles。
So in your example, the 1px
between won't be a factor because there are no pixels between 99
and 100px
and you have styles specified for both.因此,在您的示例中,之间的
1px
不会成为一个因素,因为99
和100px
之间没有像素,并且您为两者指定了 styles。 If you used 798px
instead of 799 there would be 1px
where the element defaults to the non-media styles (if any).如果您使用
798px
而不是 799,则会有1px
,其中元素默认为非媒体 styles(如果有)。
Note: the max-width
styles will prioritize over the min-width
styles if using the same value when at 800px
.注意:如果在
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.