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

Question

我们可以在媒体查询中使用“>”或“<”符号（大于和小于）吗？例如，我想隐藏所有小于 768 像素的显示器的潜水。我可以这样说吗：

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

Answer 1

媒体查询不使用这些符号。相反，他们使用min-andmax-前缀。这包含在规范中：

• 大多数媒体功能都接受可选的“min-”或“max-”前缀来表示“大于或等于”和“小于或等于”约束。此语法用于避免可能与 HTML 和 XML 冲突的“<”和“>”字符。那些接受前缀的媒体功能最常与前缀一起使用，但也可以单独使用。

所以，而不是类似的东西(width <= 768px)，你会说(max-width: 768px)：

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

Answer 2

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

TLDR，您从中学到的是：

要media('<=768px')在 CSS 中执行类似（小于或等于 768）的操作，您需要编写

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

并在 CSS 中做相当于media('<768px')(小于 768) 的操作，您需要编写

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

请注意我是如何从 中减去1的768，因此最大宽度小于 768（因为我们想要模拟<CSS 中实际不存在的小于行为）。

因此，为了模拟类似media('>768px', '<=1024')CSS 中的内容，我们将编写：

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

并且media('>=768px', '<1024')会是

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

Answer 3

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