CSS 最小/最大宽度媒体查询没有语法意义
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18431939/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
The min/max-width media query doesn't make grammatical sense
提问by Exitos
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();
}
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.
这种谈论 min 和 max 的概念没有任何意义，因为 div 元素之类的“最小宽度”是命令而不是问题。
I know that the following is true when my screen goes below 420px...
我知道当我的屏幕低于 420px 时，以下是正确的...
@media screen and (max-width:420px) {
}
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.
我只是不知道为什么，因为最大宽度是我告诉它的。如果我告诉它有什么东西，为什么 css 检查它？它肯定已经知道了。
I'm perhaps missing the grammer/context here. Can someone please explain?
我可能在这里缺少语法/上下文。有人可以解释一下吗？
回答by koala_dev
min-widthin media queries is not related to the min-widthproperty you set on elements, those are two different things.
min-width在媒体查询中与min-width您在元素上设置的属性无关，这是两件不同的事情。
In media queries min-width: Xis true if the viewport has a width greater or equal to X, effectively working as screen.width >= X. Obviously max-widthwould then be equal to screen.width <= X
在媒体查询min-width: X中，如果视口的宽度大于或等于 X，则为 true，有效地作为screen.width >= X. 显然max-width，那么将等于screen.width <= X
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
对我来说，这是完全@media screen and (max-width:420px)合理的，如果你阅读一个最大宽度为 420px 的屏幕，那么从 0 到 420px 的任何东西
回答by Josh Crozier
Here is a simple example, hopefully it helps..
这是一个简单的例子，希望它有帮助..
Say we have a website with the following media queries:
假设我们有一个具有以下媒体查询的网站：
/* #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) { ... }
If the screen size of the browser is 1200px, query #1 will be satisfied, as the minimum width of the browser has to be 980px for this query to be displayed.
如果浏览器的屏幕大小为 1200 像素，将满足查询 #1，因为浏览器的最小宽度必须为 980 像素才能显示此查询。
Lets say we resize the browser now, and bring it all the way down to 250px.. query #4 is satisfied as the MAX is 480px..
假设我们现在调整浏览器的大小，并将其一直降低到 250px.. 查询 #4 满足，因为 MAX 为 480px..
Here is a simple translation of the queries..
这是查询的简单翻译..
@media (min-width: 980px) { ... }
Display if screen is greater than or equal to 980px
屏幕大于等于980px时显示
@media (min-width: 768px) and (max-width: 979px) { ... }
Display if screen is greater than or equal to 768px and less than or equal to 978px
屏幕大于等于768px小于等于978px时显示
@media (max-width: 767px) { ... }
Display if screen is greater than 480px and less than or equal to 767px.
如果屏幕大于 480 像素且小于或等于 767 像素，则显示。
@media (max-width: 480px) { ... }
Display if screen is less than or equal to 480px
屏幕小于等于480px时显示
Using these queries, you will always have a result, as one query is always satisfied.
使用这些查询，您将始终获得结果，因为始终满足一个查询。
回答by Owlvark
The confusion here is that there is both a min-widthCSS property and media query with the same name:
这里的混淆是同时存在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 */
