如何使用＆gt;或者＆lt;媒体查询中的符号（大于和小于）

Question

我们可以使用“＆gt;”或“＆lt;”媒体查询中的符号（大于和小于）？例如，我想隐藏所有低于768px的显示器的潜水。我可以说一些这样的事情：

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

Answer 1

媒体查询不使用这些符号。相反，他们使用min-和max-前缀。这包含在spec：

中

  

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

所以，而不是像(width <= 768px)那样，你会说(max-width: 768px)而不是：

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

Answer 2

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

Answer 3

查看Sass库include-media，该库（尽管用于Sass）说明了@include media('<=768px')之类的调用如何映射到普通CSS @media查询。特别是，请参见文档中的this section。

TLDR，您从中学到的是：

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

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

要在CSS中完成media('<768px')（小于768）的等效操作，您需要编写

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

请注意，我是如何从1中减去768的，以使最大宽度小于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) {}