@media查詢設備 - 如何縱向一個CSS，景觀其他？

Question

如何為設備添加兩個不同的@media查詢css樣式表。

因此，當你擁有它時，它會激活一個而當它在風景中它會激活另一個。

---

我的情況：

我正在嘗試創建一個僅適用於橫向（1024px）的頁面，所以當你的設備（在我的情況下是Ipad）中以肖像（768px）顯示時，它會激活一個css，告訴你將屏幕轉向側面/橫向。

我試過這個：

<link rel="stylesheet" media="@media only screen and (max-device-width : 1024px) and (orientation : landscape)" href="css/tabphone.css" />
<link rel="stylesheet" media="@media only screen and (max-device-width : 768px) and (orientation : portrait)" href="css/turn.css" />

但是它只激活了最后一個。

有人知道解決我問題的方法:-)？

Answer 1

您可以使用css媒體功能“orientation”來完成此操作。 這樣，您可以根據屏幕方向指定樣式，與屏幕大小無關。 您可以在此處找到有關此媒體功能的官方w3.org定義。 結合developer.mozilla.org上的規范，這將解釋它是如何工作的。

---

引自w3.org關於'orientation'媒體功能：

當' height '媒體特征的值大於或等於 ' width '媒體特征的值時，'orientation'媒體特征是'portrait'。 否則'方向'是'風景'。

developer.mozilla.org關於“方向”功能的注釋/引用：

注意：此值（即縱向或橫向）與實際設備方向 不對應。 在縱向打開大多數設備上的軟鍵盤將導致視口變得比它高，從而導致瀏覽器使用橫向樣式而不是縱向。

---

所以概括來說，實際上並不是觸發縱向或橫向媒體查詢的屏幕方向。 然而，它是屏幕的高度和寬度之間的比例！ 因此，使用非移動/觸覺設備的“定向功能”也是有意義的，因此我添加了一個小型演示來顯示這些媒體查詢的行為。

JSFIDDLE DEMO （嘗試調整視圖端口的大小）

以下是影響肖像和橫向方向的代表性媒體查詢。

 @media screen and (orientation:portrait) {
     /* Portrait styles */
     /*hide your main content and display message */

 }
 @media screen and (orientation:landscape) {
     /* Landscape styles */
     /* show your content*/

 }