CSS @page - 尺寸

CSS 中 @page at-rule 的 size 描述符用於定義表示頁面的框的尺寸和方向。這裡的尺寸對應於列印頁面的尺寸。

頁面尺寸可以使用可縮放關鍵字或絕對尺寸值來定義。

可能的值

CSS 中 @page at-rule 的 size 描述符包含以下值之一：

auto：頁面大小由使用者代理決定。使用目標頁面的尺寸和方向。
landscape：頁面內容以橫向模式顯示（最長邊為水平方向）。
portrait：頁面內容以縱向模式顯示（最長邊為垂直方向）。預設方向值。
<length>：可以傳遞任何長度值，其中第一個值對應於框的寬度，第二個值對應於框的高度。如果只提供一個值，則該值同時用於寬度和高度。
<page-size>：指定一個關鍵字，可以是以下值之一：
- A5：匹配標準 ISO 尺寸 148mm x 210mm。
- A4：匹配標準 ISO 尺寸 210mm x 297mm。
- A3：匹配標準 ISO 尺寸 297mm x 420mm。
- B5：匹配標準 ISO 尺寸 176mm x 250mm。
- B4：匹配標準 ISO 尺寸 250mm x 353mm。
- JIS-B5：匹配 JIS 標準尺寸 182mm x 257mm。
- JIS-B4：匹配 JIS 標準尺寸 257mm x 364mm。
- letter：相當於北美信紙的尺寸，即 8.5in x 11in。
- legal：相當於北美法律檔案的尺寸，即 8.5in x 14in。
- ledger：相當於北美賬本頁面的尺寸，即 11in x 17in。

語法

size: <length> | auto | [ <page-size> || [ landscape | portrait ] ];

CSS 尺寸 - <page-size> 和橫向值

以下示例演示了使用 @page at-rule 的 size 描述符，其值為 關鍵字 和 landscape。

<html>
<head>
<style>
   /* default for all pages */
   @page {
      size: A4 landscape;
   }

   p {
      font-size: 1.5em;
   }
</style>
</head>
<body>
   <h1>landscape</h1>
   <p>See the size and orientation of the page.</p>

   <button style="background-color: green; color: white; font-size: 1em;">Print</button>

   <script>
      const button = document.querySelector("button");

      button.addEventListener("click", () => {
      window.print();
      });
   </script>   
</body>
</html>

CSS 尺寸 - <page-size> 和縱向值

以下示例演示了使用 @page at-rule 的 size 描述符，其值為 關鍵字 和 portrait。

<html>
<head>
<style>
   /* default for all pages */
   @page {
      size: A4 portrait;
   }

   p {
      font-size: 1.5em;
   }
</style>
</head>
<body>
   <h1>portrait</h1>
   <p>See the size and orientation of the page.</p>

   <button style="background-color: green; color: white; font-size: 1em;">Print</button>

   <script>
      const button = document.querySelector("button");

      button.addEventListener("click", () => {
      window.print();
      });
   </script>   
</body>
</html>

CSS 尺寸 - 自定義尺寸

以下示例演示了使用 @page at-rule 的 size 描述符，其值為 關鍵字 和 landscape。

<html>
<head>
<style>
   /* default for all pages */
   @page {
      size: 15in 11in;
   }

   p {
      font-size: 1.5em;
   }
</style>
</head>
<body>
   <h1>custom size</h1>
   <p>See the size of the page (custom size).</p>

   <button style="background-color: green; color: white; font-size: 1em;">Print</button>

   <script>
      const button = document.querySelector("button");

      button.addEventListener("click", () => {
      window.print();
      });
   </script>   
</body>
</html>

CSS 尺寸 - 在 @media 規則內巢狀

以下示例演示了使用 @page at-rule 的 size 描述符，其值為 關鍵字 和 landscape。

<html>
<head>
<style>
   @media print {
      @page {
         size: 80mm 200mm;
      }
   }

   p {
      font-size: 1.5em;
   }
</style>
</head>
<body>
   <h1>Nesting inside @media rule</h1>
   <p>See the size of the page.</p>

   <button style="background-color: green; color: white; font-size: 1em;">Print</button>

   <script>
      const button = document.querySelector("button");

      button.addEventListener("click", () => {
      window.print();
      });
   </script>   
</body>
</html>

列印頁面