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

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在小于(最大宽度)544px的屏幕上以及大于(最小宽度)767px的屏幕上.

Answer 2

如果您想要在BOTH条件为真时应用的媒体查询(我认为这是您在这里寻找的),请使用另一个and.这里它默认是隐藏的,只有在544px到767px之间时才可见.

.my-element {
  display: none;

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