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

Question

我们可以在媒体查询中使用">"或"<"符号(大于和小于)吗？例如,我想隐藏所有低于768px的显示器的潜水.我可以这样说一些事情:

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

Answer 1

媒体查询不使用这些符号.相反,他们使用min-和max-前缀.这包含在规范中:

• 大多数媒体功能接受可选的"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) {}

并且要media('<768px')在 CSS 中做相当于（小于 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) { ... }