在CSS 中使用媒體查詢(xún)同時(shí)滿(mǎn)足多個(gè)條件的方法如下：1. 使用and 連接多個(gè)條件，確保所有條件都成立，例如@media screen and (min-width: 600px) and (max-width: 900px) and (min-device-pixel-ratio: 2)；2. 使用逗號(hào), 表示“或”的關(guān)係，只要其中一個(gè)條件滿(mǎn)足即可，例如@media (max-width: 480px), (max-height: 320px)；3. 可通過(guò)括號(hào)明確邏輯優(yōu)先級(jí)以增強(qiáng)可讀性；4. 使用not 否定某個(gè)條件，例如@media not all and (max-width: 600px)；5. 使用only 防止舊版瀏覽器錯(cuò)誤識(shí)別，例如@media only screen and (max-width: 600px)。正確掌握這些邏輯運(yùn)算符和語(yǔ)法是實(shí)現(xiàn)複雜媒體查詢(xún)的關(guān)鍵。

在CSS 中，如果你想在一個(gè)媒體查詢(xún)裡同時(shí)滿(mǎn)足多個(gè)條件，其實(shí)方法挺直接的。你可以用邏輯運(yùn)算符來(lái)連接不同的條件，最常用的就是and和, （逗號(hào)），還有not 。重點(diǎn)是，這些條件要寫(xiě)得清晰、結(jié)構(gòu)正確。

使用and連接多個(gè)條件

當(dāng)你需要同時(shí)滿(mǎn)足兩個(gè)或多個(gè)條件時(shí)，就可以用and來(lái)連接。比如你想在屏幕寬度介於600px 到900px 之間，並且設(shè)備像素比為2 的設(shè)備上應(yīng)用樣式，可以這樣寫(xiě)：

 @media screen and (min-width: 600px) and (max-width: 900px) and (min-device-pixel-ratio: 2) {
  /* 樣式內(nèi)容*/
}

• 每個(gè)條件都必須成立，樣式才會(huì)生效。
• 注意每個(gè)括號(hào)裡的表達(dá)式都要用and連接。
• 如果你漏掉了某個(gè)關(guān)鍵詞，比如screen and ，整個(gè)媒體查詢(xún)可能就不起作用了。

使用逗號(hào),表示“或”的關(guān)係

如果你希望滿(mǎn)足任意一個(gè)條件就能觸發(fā)媒體查詢(xún)，可以用逗號(hào)來(lái)分隔不同條件組。例如：

 @media (max-width: 480px), (max-height: 320px) {
  /* 當(dāng)屏幕寬度小於等於480px 或高度小於等於320px 時(shí)生效*/
}

• 這裡的每個(gè)條件是獨(dú)立的，只要其中一個(gè)滿(mǎn)足，樣式就會(huì)被應(yīng)用。
• 適合用於適配多種不同尺寸或方向的設(shè)備。

注意語(yǔ)法順序和括號(hào)使用

雖然大多數(shù)情況下你可以省略括號(hào)，但有些複雜場(chǎng)景下加上括號(hào)會(huì)更清晰。比如你想判斷(min-width: 768px) 并且(orientation: landscape)或者(min-width: 1024px) ，這時(shí)候建議加上括號(hào)來(lái)明確優(yōu)先級(jí)：

 @media (min-width: 768px) and (orientation: landscape), (min-width: 1024px) {
  /* ... */
}

或者為了更清楚地表達(dá)邏輯：

 @media ((min-width: 768px) and (orientation: landscape)), (min-width: 1024px) {
  /* ... */
}

不過(guò)注意，並不是所有瀏覽器都支持這種寫(xiě)法，加括號(hào)更多是為了代碼可讀性，實(shí)際運(yùn)行還是按默認(rèn)優(yōu)先級(jí)處理。

小技巧：別忘了not和only

除了and和逗號(hào)，你還可以用not來(lái)否定某個(gè)條件：

 @media not all and (max-width: 600px) {
  /* 當(dāng)寬度大於600px 時(shí)才生效*/
}

而only主要是用來(lái)防止舊版瀏覽器錯(cuò)誤識(shí)別媒體查詢(xún)：

 @media only screen and (max-width: 600px) {
  /* 只有現(xiàn)代瀏覽器識(shí)別*/
}

基本上就這些。組合多個(gè)條件的關(guān)鍵在於理解邏輯關(guān)係，以及正確使用關(guān)鍵字和語(yǔ)法。剛開(kāi)始可能會(huì)有點(diǎn)繞，但多練幾次就熟悉了。

以上是如何在單個(gè)媒體查詢(xún)中組合多個(gè)條件？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！