最小/最大宽度媒体查询没有语法意义 [英] The min/max-width media query doesn't make grammatical sense

问题描述

我发现(最小宽度/最大宽度)媒体查询的概念有点令人困惑.

I'm finding the concept of the (min-width/max-width) media query a bit confusing.

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

Naturally if I was to design a media query I would want to say (in pseudo-code)....

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

这种谈论 min 和 max 的概念没有任何意义，因为像 div 元素这样的东西的min-width"是命令而不是问题.

This concept of talking about min and max doesn't make any sense since the 'min-width' of something like a div element is a command not a question.

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

I know that the following is true when my screen goes below 420px...

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


}

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

I just don't know why because the max width is something I tell it to have. If I have told it to have something why is css checking it? Surely it already knows it.

我可能在这里遗漏了语法/上下文.有人可以解释一下吗?

I'm perhaps missing the grammer/context here. Can someone please explain?

推荐答案

min-width in media queries 与你在元素上设置的 min-width 属性无关，这是两种不同的东西.

min-width in media queries is not related to the min-width property you set on elements, those are two different things.

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

In media queries min-width: X is true if the viewport has a width greater or equal to X, effectively working as screen.width >= X. Obviously max-width would then be equal to screen.width <= X

对我来说这是完全有道理的，如果你把 @media screen and (max-width:420px) 看成一个最大宽度为 420px 的屏幕，所以从 0 到 420px 的任何东西

To me it makes perfect sense, if you read @media screen and (max-width:420px) as a screen with a maximum width of 420px, so anything from 0 to 420px

这篇关于最小/最大宽度媒体查询没有语法意义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！