Question

我发现（min-width / max-width）媒体查询的概念有点令人困惑。

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

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

这个谈论min和max的概念没有任何意义，因为像div元素这样的'min-width'是一个命令而不是问题。

我知道当我的屏幕低于420px时，以下情况属实......

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


}

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

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

Answer 1

媒体查询中的

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

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

对我而言，如果您将@media screen and (max-width:420px)视为最大宽度为420像素的屏幕，那么这一点非常有意义，所以0到420px之间的任何内容

Answer 2

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

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

/* #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 ..查询＃4满意，因为MAX是480px ..

以下是查询的简单翻译..

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

显示屏幕是否大于或等于980px

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

显示屏幕是否大于或等于768px且小于或等于978px

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

显示屏幕是否大于480px且小于或等于767px。

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

显示屏幕是否小于或等于480px

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

Answer 3

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

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

3 个答案: