我发现(最小宽度/最大宽度)媒体查询的概念有些混乱。

自然，如果我要设计媒体查询，我想说(用伪代码)。

if(screen.width < 420)

{

ApplyStyle();

}

谈论min和max的概念没有任何意义，因为div元素之类的"最小宽度"是命令而不是问题。

我知道以下内容适用于我的屏幕低于420px的情况...

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

}

我只是不知道为什么，因为我告诉它最大宽度。 如果我告诉它有东西，为什么CSS检查它？ 当然，它已经知道了。

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

我完全赞成你。 作为程序员，if(screen.width < 420)使SOOOO更加有意义，并且可以立即理解。

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

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

对我来说，这很有意义，如果您将@media screen and (max-width:420px)读为最大宽度为420px的屏幕，那么0到420px之间的任何值

我不得不回到这个问题上，并且意识到您的答案实际上是正确的答案。 最后一句话为我钉上了钉子。 谢谢！

是的，对不起，我只是迷失了所有原始内容，然后在这里的最后一句话中磨练了一下。 我希望没有难过的感觉！

这是一个简单的示例，希望对您有所帮助。

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

/* #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) { ... }

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

可以说我们现在调整浏览器的大小，并将其一直缩小到250px。由于最大为480px，所以满足了查询4。

这是查询的简单翻译。

@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) { ... }

如果屏幕小于或等于480像素，则显示

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

这里的困惑在于，同时存在一个min-width CSS属性和具有相同名称的媒体查询：

@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 */