@page { size: landscape } 是唯一能直接控制打印纸张方向的 css 机制，必须置于 @media print 中，且需配合内容样式调整以避免截断或错位。
如何用 @page 设置横向打印
浏览器默认纵向打印，@page 是唯一能直接控制纸张方向的 CSS 机制，但只在打印媒体中生效，且部分属性受浏览器和打印机驱动限制。
-
@page必须写在@media print块内或独立的打印样式表中，单独写在普通样式里无效 - 设置横向要同时指定
size: landscape，仅靠transform或writing-mode不会改变实际出纸方向 - Chrome 和 Edge 支持较好；Firefox 对
@page { size: landscape }的支持从 v91+ 稳定，旧版可能忽略
@media print {
@page {
size: landscape;
}
}
@page size 属性的写法差异
size 不是简单的布尔开关，它接受多种格式，不同写法行为不同，容易误以为“设了就横”。
-
size: landscape：依赖浏览器将当前纸张（如 A4）旋转，最常用也最可靠 -
size: 297mm 210mm：显式交换宽高，等价于 landscape，但需单位精确，无空格容错 -
size: A4 landscape：合法，但部分旧版 Safari 会忽略landscape关键字，只认尺寸顺序 - 不能写成
size: rotate或orientation: landscape—— 后者不是标准属性，会被忽略
为什么加了 @page 还是纵向打印
常见不是代码写错，而是被更高优先级的用户设置或系统策略覆盖。
- 用户在浏览器打印对话框中手动选了“纵向”，会强制覆盖
@page声明 - 某些企业环境通过组策略禁用了网页对
@page的控制权（尤其 Windows + Chrome 管理版） - CSS 中存在多个
@page规则且命名冲突（如@page :first和匿名@page），导致规则未命中 - 目标元素本身设置了
page-break-inside: avoid，但容器高度超出单页，触发分页后@page行为异常
横向打印时内容被截断或错位
@page { size: landscape } 只改纸张方向，不自动调整内容布局，这是最容易被忽略的一点。
立即学习“前端免费学习笔记（深入）”；
- 原本按纵向设计的容器（如
width: 100%）在横向下可能超出纸张宽度，被裁剪 —— 需配合@media print重设max-width或width - 表格、Flex 容器等在横向下可能换行异常，建议加
white-space: nowrap或overflow-x: visible - 绝对定位元素基于视口而非页面物理尺寸，横向后坐标可能偏移，应避免依赖
top/left绝对值
真正起作用的是 @page 和内容样式协同，不是单靠一个规则就能“全自动横打”。
