CSS媒體特性 - 方向

CSS orientation 媒體特性用於確定裝置螢幕或頁面是處於縱向還是橫向方向。

裝置的方向並不總是與螢幕的方向相同。例如，如果您在縱向方向的裝置上開啟軟鍵盤，螢幕將比高寬更寬。在這種情況下，瀏覽器將使用橫向樣式而不是縱向樣式。

可能的值

portrait − 當視口的高度超過其寬度時應用此值，這通常表示裝置垂直放置。
landscape − 當視口的寬度大於其高度時應用此值，這通常表示裝置水平放置。

語法

orientation: portrait|landscape;

CSS orientation - portrait 值

以下示例演示了當裝置處於portrait方向時，盒子的背景顏色會變為綠色：

<html>
<head>
<style>
   iframe {
      display: block;
      height: 200px;
   }
</style>
</head>
<body>
   <label id="labelWidth" for="width"></label>
   <input id="width" type="range" min="120" max="250" step="4" />
   
   <iframe
   id="block"
   srcdoc="<style> @media (orientation: portrait) { div { background: lightgreen; } } </style><div><h3>To see the effect resize your viewport's width.</h3> <p>When box is in portrait orientation background changes to green color, otherwise background color will remain white.</p> </div>">
   </iframe>
   
   <script>
      const updateSize = (size, label) => {
         block.style[size] = `${eval(size).value}px`;
      };

      width.oninput = () => updateSize("width", labelWidth);
   </script>
</body>
</html>

CSS orientation - landscape 值

以下示例演示了當裝置處於landscape方向時，盒子的背景顏色會變為黃色：

<html>
<head>
<style>
   iframe {
      display: block;
      height: 200px;
   }
</style>
</head>
<body>
   <label id="labelWidth" for="width"></label>
   <input id="width" type="range" min="120" max="250" step="4" />
   
   <iframe
   id="block"
   srcdoc="<style> @media (orientation: landscape) { div { background: yellow; } } </style><div><h3>To see the effect resize your viewport's width.</h3> <p>When box is in portrait orientation background changes to yellow color, otherwise background color will remain white.</p> </div>">
   </iframe>
   
   <script>
      const updateSize = (size, label) => {
         block.style[size] = `${eval(size).value}px`;
      };

      width.oninput = () => updateSize("width", labelWidth);
   </script>
</body>
</html>

列印頁面