如何創建同時適用於設備寬度和寬度的媒體查詢

Question

我嘗試在調整頁面大小和手機大小時在兩臺桌面上都可以使用此媒體查詢。

移動

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

這項工作，這對桌面

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

，但我不能讓他們的工作都我嘗試使用or運營商，但沒有工作。

Answer 1

按照W3 documentation for Media Queries：

幾個媒體查詢可以在媒體查詢列表相結合。 A 用逗號分隔的媒體查詢列表。如果逗號分隔列表中的一個或多個媒體 查詢爲真，則整個列表爲真， ，否則爲false。在媒體查詢語法中，逗號表示 邏輯OR，而'和'關鍵字表示邏輯AND。

使用逗號，而不是或：

@media screen and (max-device-width: 320px), (max-width: 320px) { 
    ... 
}