如何在媒体查询中使用 > 或 < （大于和小于）符号

Question

我们可以在媒体查询中使用“>”或“<”符号（大于和小于符号）吗？例如，我想要隐藏所有宽度小于768px的显示器上的某个div，我能否像这样说：

我们能否在媒体查询中使用 ">" 或 "<" 符号（大于和小于符号）呢？例如，我想要对所有屏幕宽度小于 768px 的设备隐藏一个 div，我能否这样写：

@media screen and (min-width<=768px) {}

- user1986096

Answer 1

媒体查询不使用那些符号，而是使用min-和max-前缀。这在规范中有所涉及:

• 大多数媒体特性接受可选的“min-”或“max-”前缀来表达“大于或等于”和“小于或等于”约束条件。该语法用于避免与HTML和XML冲突的“<”和“>”字符。那些接受前缀的媒体特性通常会使用前缀，但也可以单独使用。

因此，您需要使用像(max-width: 768px)而不是(width <= 768px)这样的东西：

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

- BoltClock

---

当前的草稿确实允许这种类型的范围。请参阅https://drafts.csswg.org/mediaqueries/#mq-syntax - tremby

@Adam Taylor：是的。事实证明，MQ3对HTML/XML冲突的担忧被活动中的HTML检查器所证伪，因为它甚至可以验证媒体查询在media =“”属性中的使用情况。(续) - BoltClock

比较有效的媒体查询结果和无效的媒体查询结果。 - BoltClock

@Adam Taylor：不知道为什么我说了HTML/XML，我确定在XML模式下（application/xhtml+xml以及任何其他实现媒体查询的基于XML的语言），你仍然需要担心在属性值中编码<和>。 - BoltClock

这个答案已经不正确了。所有浏览器都支持 < 和 >。 - theking2

Answer 2

请查看Sass库include-media，它解释了像@include media('<=768px')这样的调用是如何映射到普通的CSS @media查询的（尽管是针对Sass的）。特别是，请参阅文档中的此部分。

简而言之，您可以从中了解到：

要在CSS中等效于像media('<=768px')（小于或等于768）的内容，您需要编写：

@media (max-width: 768px) {}

如果要在CSS中实现与media('<768px')（小于768）相同的效果，您需要编写以下代码：

```css @media (max-width: 767px) { /* Your styles here */ } ```

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

注意我从768中减去了1，这样最大宽度就小于768（因为我们想模拟在CSS中实际不存在的<小于行为）。

所以，为了在CSS中模拟像media('>768px', '<=1024')这样的东西，我们需要编写：

@media (min-width: 769px) and (max-width: 1024px) {}

而media('>=768px', '<1024')将会是

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

- trusktr

---

然而，如果你在媒体查询中所做的一切都是覆盖先前查询设置的内容，那么最好没有重叠，并且使用@media (min-width: 768px) and (max-width: 1024px)。下一个查询将是@media (min-width: 1024px) and (max-width: 1280px)，并且一旦达到1024就会覆盖所有内容。在这种情况下，如果你在1024处，两个规则在技术上都匹配，但是最后一个规则获胜。当你的缩放级别不是100%时，很可能会出现非整数宽度（1279.5），因此两者都不匹配 - 如果你的查询包括display:none，你的所有内容都有消失的风险！ - Simon_Weaver

你可能会遇到这样的情况（抱歉我没有例子），即你真的不想有一个像素的重叠 - 我想如果你在第一个查询中设置了某些东西，而在第二个查询中没有明确覆盖它，那么就会出现这种情况。在这种情况下，减去0.01或非常小的值，以给出@media(min-width:768px)and(max-width:1023.99px)。我讨厌这样做，但这是我不得不偶尔做的事情。除非你发现需要这样做，否则不要将其作为例行程序！因为这太丑陋了！ - Simon_Weaver

Answer 3

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

- Zack Burt

Answer 4

CSS Media Queries Level 4规范在媒体查询中支持">"或"<"符号。

所以，不再使用：

@media screen and (max-width: 768px) { /* … */ }

你现在可以写了。

@media screen and (width >= 768px) { /* … */ }

检查浏览器支持这里。

阅读更多这里。

- MrRobz

---

我认为对于所有新的CSS设计师来说，这将是首选的方法。为什么要使用max-width:和min-width:使事情变得超级复杂，而每个接受过基本数学教育的人都知道<和>的含义呢？ - theking2

浏览器支持链接已失效。 - run_the_race

截至今天，2023年11月21日，这应该是被接受的答案。自十多年前起，得到了所有主要浏览器的支持。浏览器支持链接已更新，支持广泛，尤其是在最新版本的浏览器中。 - undefined