如何在一个媒体查询中组合最小宽度和最大宽度

Question

此媒体查询无法正常工作。

我想要做的是在窗口低于544px时隐藏元素，如果它高于767px则隐藏它。因此只有在窗口介于544px和767px之间时才能看到它。

@media (max-width: 544px) and (min-width: 767px) {
    .show-sm-only {
        display: none !important;
    }
 }

它们似乎是分开工作，但不是一起工作。

我如何实现这一目标？

Answer 1

您可以将两个媒体查询合并为一个，如下所示：

@media (max-width: 544px), (min-width: 767px) {
.show-sm-only {
    display: none !important;
}
}

编辑这会隐藏.show-sm-only小于（最大宽度）544像素的屏幕，屏幕大于（最小宽度）767像素。

Answer 2

如果您想要在BOTH条件为真时应用的媒体查询（我认为这是您在此处寻找的内容），请使用另一个and。这里它默认是隐藏的，只有在544px到767px之间时才可见。

.my-element {
  display: none;

  @media (min-width: 544px) and (max-width: 767px) {
    display: block;
  }
}

Answer 3

你想要这个，你的规则是错误的。现在你说它必须小于（最大宽度）544px，但大于（最小宽度）767px，这是不可能的。请参阅下文，他们是如何相反的。

编辑根据评论。要做or（而不是and，而你的情况是不可能的），请用逗号分隔：

@media (max-width: 544px), (min-width: 767px) {
    .show-sm-only {
        display: none !important;
    }
 }