CSS - 媒體查詢爲不同的方向

Question

我想寫媒體查詢

像

@media only screen 
and (min-device-width : 980px) and (max-device-width : 1024px) and (orientation : landscape) { 
.login-details .offset2 li.first a { 
      margin: 6% 19% 0; 
    } 

} 

這是工作的罰款

現在的問題是發生

當我使用使用Firefox crtl + shift + M

與**** 980 * 1280與橫向****

它工作正常 現在，當我檢查簡單的看法。 CSS仍在挑選中。我希望媒體只會選擇風景。

Answer 1

@media（orientation：landscape）對於普通桌面顯示器（1024 x 768,1440x800等）是正確的。

您在此塊中應用的樣式將適用於桌面，但不適用於縱向模式下的設備。

例如，

@media (orientation : landscape) { 
    body { 
    background-color:red; 
    } 
} 

這將適用於所有的屏幕在橫向（包括臺式機顯示器）

@media (orientation : portrait) { 
    body { 
     background-color:blue; 
    } 
} 

這將適用於在肖像模式下所有的屏幕只（手機，在肖像模式片）