逗號分隔的媒體查詢列表不起作用

Question

我正在使用AngularJS和SCSS編碼網站。我處於開發的移動階段，我很快發現（對於這個項目），我需要一種使用@media查詢來定位多個斷點的方法。所以我通過this SO answer和this CSS Tricks Post找到了SO以及其他多個答案。然後我在測試用例中實現了我找到的解決方案，請參閱下面的測試代碼片段。

main { 
    background-color: grey; 
    height: 100%; 
    min-height: 1000px; 

    @media (max-width: 992px) { 
     background-color: red 
    } 

    @media (max-width: 768px) { 
     background-color: lightcoral 
    } 

    @media (max-width: 992px), (max-width: 992px) and (orientation: landscape) { 
     background-color: lightgreen; 
    } 

    @media (max-width: 768px), 
    (max-width: 768px) and (orientation: landscape) { 
     background-color: lightblue; 
     // Reset the min-height here, because we no longer have the sticky search bar. 
     min-height: 450px; 
    } 
} 

<main> 
    <h1>Page Title</h1> 
    <h2>Some Descriptive information</h2> 

    <div>Content</div> 
</main> 

但我一直沒能得到它的工作。最終，我試圖做的是在用戶處於平板電腦或手機的橫向環境中時應用的樣式。但是，我不知道我是否正確地做，或正確使用or運營商。

它不起作用，好吧，第一個語句（例如：(max-width: 992px)）的作品，但第二個不計算爲真。根據Mozilla：

逗號分隔列表的行爲與邏輯運算符或在媒體查詢中使用時相似。當使用逗號分隔的媒體查詢列表時，如果任何媒體查詢返回true，則會應用樣式或樣式表。逗號分隔列表中的每個媒體查詢都被視爲單個查詢，並且應用於一個媒體查詢的任何運算符都不會影響其他媒體查詢。 --- Mozilla Documentation

即使我打破代碼爲兩個獨立的媒體查詢：

@media (max-width: 992px) { 
    background-color: lightgreen; 
} 
@media (max-width: 992px) and (orientation: landscape) { 
    background-color: lightgreen; 
} 

它仍然無法正常工作。所以我不知道我是否瞄準了錯誤的寬度（橫向）或者我做錯了什麼。那裏的其他前端開發人員能告訴我爲什麼我的逗號分隔的媒體查詢不起作用嗎？

編輯：這裏是原生代碼SCSS：

main { 
    background-color: $mono-90; 
    height: 100%; 
    min-height: 1000px; 

    @media screen and (max-width: map_get($grid-breakpoints, 'md')) { 
     // Reset the min-height here, because we no longer have the sticky search bar. 
     min-height: 450px; 
    } 

    @media 
    (max-width: map_get($grid-breakpoints, 'lg')), 
    (max-width: map_get($grid-breakpoints, 'lg')) and (orientation: landscape){ 
     background-color: lightgreen; 
    } 

    @media 
    (max-width: map_get($grid-breakpoints, 'md')), 
    (max-width: map_get($grid-breakpoints, 'md')) and (orientation: landscape){ 
     background-color: lightblue; 
    } 

    @media 
    (max-width: map_get($grid-breakpoints, 'sm')), 
    (max-width: map_get($grid-breakpoints, 'sm')) and (orientation: landscape){ 
     background-color: lightcoral; 
    } 
} 

編輯：每@Godwin的建議，我簡化我的@media查詢到這一點：

main { 
    background-color: $mono-90; 
    height: 100%; 
    min-height: 1000px; 

    @media screen and (max-width: map_get($grid-breakpoints, 'md')) { 
     // Reset the min-height here, because we no longer have the sticky search bar. 
     min-height: 450px; 
    } 

    @media screen and (max-width: map_get($grid-breakpoints, 'lg')) { 
     background-color: lightgreen; 
    } 

    @media screen and (max-width: map_get($grid-breakpoints, 'md')) { 
     background-color: lightblue; 
    } 

    @media screen and (max-width: map_get($grid-breakpoints, 'sm')) { 
     background-color: lightcoral; 
    } 
} 

然而，它不適用於iPad風景（1024x768）。我不要希望它顯示在筆記本電腦上，但做希望它顯示在橫向位置的iPad上。

Answer 1

但是，它不適用於iPad橫向（1024x768）。我不希望它顯示在筆記本電腦上，但希望它顯示在橫向位置的iPad上。

我不知道你被它界定什麼，因爲你不是在你的例子隱藏任何東西，所以我要去參考：

我所試圖做的最終，當用戶在平板電腦或手機上進行橫向瀏覽時，會應用這些樣式。

Orientation on MDM被定義爲以下：

該值不對應於實際設備取向。

它只是指示視口是在橫向（顯示比寬高）還是縱向（顯示高於寬）模式。

你說你的iPad橫向分辨率爲1024x768，所以要以橫向模式定位iPad或手機，你可以設置一個媒體查詢，定位所有最大寬度爲1024px，處於橫向模式的設備顯示器比它高）：

main { 
    background-color: grey; 
    height: 100%; 
    min-height: 1000px; 
    width: 100%; 

    @media screen and (max-width: 1024px) and (orientation: landscape) { 
    background-color: lightblue; 
    } 
} 

您可以檢查this codepen的示例。

如果您的視口的寬度大於1024像素，那麼main元素無論如何都是灰色的。

如果調整瀏覽器窗口有一個與寬度等於或小於1,024像素x的視口，並且具有在橫向（顯示較寬大於高度）被認爲是視口，例如一個iPad在橫向模式（1024×768），媒體查詢將觸發並應用藍色背景：

如果調整您的瀏覽器窗口中仍然有一個等於或小於1,024像素視口，但有一個高度大於你的寬度，視口不再是consi被認爲處於橫向模式，但切換到縱向模式。這時，媒體查詢不再被觸發，我們退回到一個灰色元素：

所以，關於你的問題，這個例子是一個媒體查詢使用平板電腦樣式應用到用戶或手機處於橫向模式。

Answer 2

這裏是一個解決方案。希望這會爲你工作

main { 
 
    background-color: grey; 
 
    height: 100%; 
 
    min-height: 1000px; 
 
} 
 
     
 
    @media (max-width: 992px) and (orientation:portrait) { 
 
\t \t main{ 
 
     background-color: red 
 
\t \t } 
 
    } 
 

 
    @media (max-width: 768px) and (orientation:portrait) { 
 
\t \t main{ 
 
     background-color: lightcoral 
 
\t \t } 
 
    } 
 
@media (max-width: 992px) and (orientation: landscape) { 
 
\t \t main{ 
 
     background-color: lightgreen; 
 
\t \t } 
 
    } 
 

 
    @media (max-width: 768px) and (orientation: landscape) { 
 
\t \t main{ 
 
     background-color: lightblue; 
 
     min-height: 450px; 
 
\t \t } 
 
    }

<main> 
 
    <h1>Page Title</h1> 
 
    <h2>Some Descriptive information</h2> 
 

 
    <div>Content</div> 
 
</main>