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>

打印页面