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

此媒体查询无法正常运行。

我想做的是，如果窗口低于544px，则隐藏一个元素，如果窗口高于767px，则将其隐藏。因此，只有当窗口介于544px和767px之间时，它才可见。

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

看来他们是分开工作，而不是一起工作。

我该如何实现？

最佳答案

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

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

编辑这将在小于(最大宽度)544px的屏幕上和大于(最小宽度)767px的屏幕上隐藏.show-sm-only。