如何在打印时通过媒体查询，根据动态设定的方向来调整CSS？

前端开发 2026-07-12

我在页面为横向（landscape）时，尝试在某个元素之后通过媒体查询添加分页符：

@media print and (orientation: landscape) {
  .item2 {
    break-after: page;
  }
}

当在打印对话框中选择方向时，这样做可以正常工作。

然而，当页面尺寸通过css提供时，分页符就不会出现：

@page {
  size: a4 landscape;
}

示例：

body {  
  print-color-adjust: exact;
}

.item1,
.item2,
.item3 {
  width: 100%;
  height: 200px;
}

.item1, .item3 {  
  background-color: gray;
}
.item2 {  
  background-color: red;
}

@page {
  /* remove this line to see it work */
  size: a4 landscape;
}

@media print and (orientation: landscape) {
  .item2 {
    break-after: page;
  }
}

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="item1"></div>
    <div class="item2"></div>
    <div class="item3"></div>
  </body>
</html>

在Chrome和 Firefox中测试过。
这是一个bug吗，还是我做错了什么？

编辑：
我想在打开打印对话框之前动态设置 @page 规则，因为我需要根据方向通过JS更新某些SVG。