CSS 如何在媒体查询中使用 > 或 <（大于和小于）符号
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14534477/
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
How to use > or < (Greater than and Less than ) Symbols in Media Queries
提问by user1986096
Can we use the ">" or "<" symbols(Greater than and Less than ) in media queries? for example I would like to hide a dive for all monitors less than 768px. can I say some thing like this:
我们可以在媒体查询中使用“>”或“<”符号（大于和小于）吗？例如，我想隐藏所有小于 768 像素的显示器的潜水。我可以这样说吗：
@media screen and (min-width<=768px) {}
回答by BoltClock
Media queries don't make use of those symbols. Instead, they use the min-and max-prefixes. This is covered in the spec:
媒体查询不使用这些符号。相反，他们使用min-和max-前缀。这包含在规范中：
- Most media features accept optional ‘min-' or ‘max-' prefixes to express "greater or equal to" and "smaller or equal to" constraints. This syntax is used to avoid "<" and ">" characters which may conflict with HTML and XML. Those media features that accept prefixes will most often be used with prefixes, but can also be used alone.
- 大多数媒体功能接受可选的“min-”或“max-”前缀来表达“大于或等于”和“小于或等于”约束。此语法用于避免可能与 HTML 和 XML 冲突的“<”和“>”字符。那些接受前缀的媒体功能最常与前缀一起使用，但也可以单独使用。
So, instead of something like (width <= 768px), you would say (max-width: 768px)instead:
所以，(width <= 768px)你会说(max-width: 768px)：
@media screen and (max-width: 768px) {}
回答by Zack Burt
@media screen and (max-width: 768px) { ... }
回答by trusktr
Check out the Sass lib include-media, which (despite being for Sass) explains how calls like @include media('<=768px')maps to plain CSS @mediaqueries. In particular, see this sectionof the docs.
查看 Sass 库include-media，它（尽管是 Sass 的）解释了如何调用@include media('<=768px')映射到普通 CSS@media查询。特别是，请参阅文档的这一部分。
TLDR, what you learn from there is:
TLDR，你从那里学到的是：
To do the equivalent of something like media('<=768px')(less than or equal to 768) in CSS, you need to write
要media('<=768px')在 CSS 中执行类似（小于或等于 768）的操作，您需要编写
@media (max-width: 768px) {}
and to do the equivalent of media('<768px')(less than 768) in CSS, you need to write
并且要media('<768px')在 CSS 中做相当于（小于 768），你需要写
@media (max-width: 767px) {}
Notice how I subtracted 1from 768, so that the max width is less than 768 (because we wanted to emulate the <less-than behavior which doesn't actually exist in CSS).
注意我是如何减去1从768，所以最大宽度小于768（因为我们想效仿<低于行为，它实际上并不存在于CSS）。
So to emulate something like media('>768px', '<=1024')in CSS, we would write:
因此，要模拟media('>768px', '<=1024')CSS 之类的东西，我们可以这样写：
@media (min-width: 769px) and (max-width: 1024px) {}
and media('>=768px', '<1024')would be
并且media('>=768px', '<1024')会
@media (min-width: 768px) and (max-width: 1023px) {}
