12

我发现（最小宽度/最大宽度）媒体查询的概念有点令人困惑。

当然，如果我要设计一个媒体查询，我想说（用伪代码）......

if(screen.width < 420)
{
     ApplyStyle();
}

这种谈论最小值和最大值的概念没有任何意义，因为像 div 元素这样的东西的“最小宽度”是一个命令而不是一个问题。

我知道当我的屏幕低于 420 像素时，以下情况是正确的......

@media screen and (max-width:420px) {


}

我只是不知道为什么，因为最大宽度是我告诉它的。如果我告诉它有东西，为什么 css 会检查它？它肯定已经知道了。

我可能在这里错过了语法/上下文。有人可以解释一下吗？

4

3 回答 3

20

min-width在媒体查询中与您在元素上设置的属性无关min-width，这是两件不同的事情。

min-width: X如果视口的宽度大于或等于 X，则在媒体查询中为真，有效地工作为screen.width >= X. 显然max-width将等于screen.width <= X

对我来说，如果您阅读@media screen and (max-width:420px)最大宽度为 420 像素的屏幕，那么这很有意义，所以从 0 到 420 像素

于 2013-08-25T18:57:16.883 回答
13

这是一个简单的例子，希望它有帮助..

假设我们有一个包含以下媒体查询的网站：

/* #1- Large desktop */
@media (min-width: 980px) { ... }

/* #2- Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* #3- Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* #4- Landscape phones and down */
@media (max-width: 480px) { ... }

如果浏览器的屏幕尺寸为 1200 像素，则查询 #1 将得到满足，因为浏览器的最小宽度必须为 980 像素才能显示此查询。

假设我们现在调整浏览器的大小，并将其一直降低到 250px .. 查询 #4 满足，因为 MAX 是 480px ..

这是查询的简单翻译..

@media (min-width: 980px) { ... }

屏幕大于等于 980px 时显示

@media (min-width: 768px) and (max-width: 979px) { ... }

屏幕大于等于 768px 小于等于 978px 时显示

@media (max-width: 767px) { ... }

如果屏幕大于 480 像素且小于或等于 767 像素，则显示。

@media (max-width: 480px) { ... }

屏幕小于等于 480px 时显示

使用这些查询，您将始终得到结果，因为始终满足一个查询。

于 2013-08-25T18:00:00.840 回答
1

这里的混淆是min-widthCSS 属性和媒体查询都具有相同的名称：

@media (min-width: 420px) {...} /* This is read-only and is set to screen size */

.element { min-width: 420px; ...} /* This is setting a property of the selected element */
于 2013-08-25T18:50:26.847 回答