如何在一個媒體查詢中合併最小寬度和最大寬度

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

你想要這個，你的規則是錯誤的方式。現在你說它必須小於（最大寬度）544px，但大於（最小寬度）767px，這是不可能的。看下面他們是如何相反的。

編輯根據評論。要做到or（而不是and，這對於你的情況是不可能的），用逗號分隔：

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

Answer 3

如果您希望在BOTH條件爲真（我認爲這是您要查找的內容）時應用的媒體查詢，請使用另一個and。這裏默認是隱藏的，只有在544px到767px之間纔可見。

.my-element { 
    display: none; 

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