最小/最大宽度媒体查询没有语法意义答案

【问题标题】：The min/max-width media query doesn't make grammatical sense最小/最大宽度媒体查询没有语法意义
【发布时间】：2013-08-28 05:21:37
【问题描述】：

我发现 (min-width/max-width) 媒体查询的概念有点混乱。

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

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

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

我知道当我的屏幕低于 420 像素时以下情况为真...

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


}

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

我可能在这里遗漏了语法/上下文。谁能解释一下？

【问题讨论】：

我完全同意你的看法。作为一名程序员，if(screen.width < 420) 让 SOOOO 更有意义，并且立即可以理解。

标签： css responsive-design

【解决方案1】：

这里的混淆是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 */

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

我不得不回过头来意识到你的答案实际上是正确的。最后一句话让我明白了。谢谢！
是的，对不起，我刚刚迷失在所有原始内容中，然后在这里磨练了最后一句话。我希望没有难过的感觉！

【解决方案3】：

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

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

/* #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时显示

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

【讨论】：