如果任一語句正確，如何執行媒體查詢？

Question

我在找出如何根據兩個語句中的任何一個是否爲true來執行css。例如：

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) 
OR 
and (max-device-width : 1024px) 
and (orientation : portrait){ 

} 

我正在做一個多平臺的網站，並已經完成了移動版本，但我想ipad公司有筆記本電腦/臺式機版本中，所有正在用好這個：

@media only screen and (min-device-width: 0px){Mobile Version CSS} 

@media only screen and (min-device-width: 500px){Other Version CSS} 

但是後來我發現在將手機改爲橫屏後，由於媒體查詢的寬度小於屏幕橫向寬度，它會切換回桌面模式。什麼是最好的媒體查詢集，我可以在兩種不同的查詢中執行，僅針對移動平臺和其他平臺，將手機作爲橫向或縱向？我不想通過多媒體查詢重複我的CSS代碼，因爲手機正在變成風景等等。我只想讓移動版本處於活動狀態，無論手機是風景還是肖像。

感謝

Answer 1

這是什麼一個快速谷歌搜索可能不會透露給你：（第一次嘗試）https://css-tricks.com/logic-in-media-queries/

媒體查詢邏輯：

• 和：and
• 或者：,
• 不是：not

 
在你的情況，你的CSS會是什麼樣子：

@media 
    only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape), 
    only screen and (max-device-width: 1024px) and (orientation: portrait) { 
    /* your css here */ 
} 

 
只是一些提醒：

1. 您的媒體查詢不服務情況「肖像和設備寬度< 768px」和「設備e-width> 1024px「。你也需要以某種方式解決這些情況。
2. 雖然一個iPad（在ladnscape）具有1,024像素的屏幕寬度，你會提出你的網站的桌面視圖，以具有至少768px寬任何其他手機/平板電腦，太。我不認爲這是個好主意。但我不知道你的網站是什麼樣的，所以我假設你知道你在做什麼。
3. BTW：難道網格系統，如bootstrap做了很多適合你？