CSS中@page规则详解与应用

CSS中并不存在`page-orientation`属性，真正控制打印页面方向的是`@page`规则中的`size`属性（如`size: A4 landscape`），但其实际生效受多重因素制约：企业组策略可能禁用该功能，命名冲突或分页行为会导致规则不匹配，而`size: landscape`仅改变纸张物理尺寸，并不会自动旋转或重排内容——需配合`@media print`手动调整容器宽度、表格换行、Flex布局等样式，甚至利用命名`@page`与`page`属性实现单页横向。浏览器支持差异大（Chrome≥65、Firefox≥19可用，Safari支持极弱），务必在打印预览中多端实测，因为横向打印本质是`@page`规则、内容样式与分页控制三者精密协同的结果，缺一不可。

@page 规则里没有 page-orientation 这个属性 —— 它根本不存在，浏览器会直接忽略。真正控制打印方向的，只有 size 属性里的 landscape 或 portrait 关键字。

@page { size: landscape } 为什么有时不生效

• 某些企业环境（尤其是 Windows + Chrome 管理版）通过组策略禁用了 @page 的权限，此时无论怎么写都无效
• 多个 @page 规则命名冲突，比如同时定义了 @page :first 和匿名 @page，而内容没匹配到对应规则
• 页面中存在 page-break-inside: avoid 的容器，但其高度超过单页，强制分页后，@page 的 size 只作用于“页框”，不接管内容重排逻辑

size: landscape 不等于“内容自动横过来”

• @page { size: A4 landscape } 仅改变纸张物理方向，不旋转 DOM 元素
• 原本按纵向设计的容器（如 width: 100%、display: flex）在横向纸张下可能超出宽度被裁剪
• 表格列宽、文字换行、Flex 折行行为不会自动适配，需手动干预

建议配合 @media print 重设关键样式：

• 给外层容器加 max-width: 297mm（A4 横向宽度）或 width: fit-content
• 表格加 white-space: nowrap 防止列被挤断
• 避免使用 position: absolute + top/left 数值定位，因为坐标系仍基于纵向视口逻辑

如何让某一页单独横向，其余纵向

用命名 @page + 元素 page 属性联动：

@page rotated {
  size: A4 landscape;
  margin: 1cm;
}
.print-landscape {
  page: rotated;
}

• .print-landscape 必须是块级元素（如 div、section），且不能被 page-break-inside: avoid 封装在无法分页的容器里
• 若该元素跨页，page: rotated 仅对它所在第一页生效，后续页仍按默认 @page 渲染
• 浏览器兼容性：Chrome ≥ 65、Firefox ≥ 19 支持；Safari 对命名 @page 支持极弱，慎用

最易被忽略的一点：横向打印不是“设个 size 就完事”，而是 @page + 内容样式 + 分页控制三者协同的结果。缺一环，内容就错位、截断或干脆不响应。

到这里，我们也就讲完了《CSS中@page规则详解与应用》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！