@page size 必须在@media print中声明才生效，支持A4等标准尺寸及宽高对（需带单位），方向关键词须紧跟尺寸后；Chrome/Edge兼容性好，Firefox对自定义尺寸加方向支持不稳定，Safari基本只认A4/letter字符串。
用 @page size 设置纸张尺寸和方向时，必须写在打印媒体查询里
直接在普通样式表中写 @page { size: A4 landscape; } 是无效的——浏览器只在打印上下文（@media print）中解析 @page 规则。不套这层壳，CSS 引擎压根不认。
- 正确写法：
@media print { @page { size: A4 landscape; } } -
size值支持标准纸张名（A4、letter、legal），也支持宽高对（210mm 297mm），单位必须明确，210 297这种无单位写法会被忽略 - 方向关键词
portrait和landscape必须紧跟在尺寸值后面，顺序不能颠倒；size: landscape A4是非法语法，部分浏览器会静默失败
size 在不同浏览器中的兼容性差异很实际
Chrome 和 Edge（Chromium 内核）支持完整语法，包括自定义宽高 + 方向组合；Firefox 支持 A4 landscape 这类标准写法，但对 size: 210mm 297mm landscape 的解析不稳定，有时会回退为 portrait；Safari（macOS）对 @page 支持最弱，size 基本只认 A4/letter 字符串，加方向或自定义尺寸大概率被忽略。
- 如果目标用户含 Safari 用户，建议只用
size: A4或size: letter，方向靠@page { transform: rotate(90deg); }模拟（不推荐，仅作降级备选） - 不要依赖
size: auto——它不是重置值，而是让浏览器按默认设置走，无法保证跨设备一致
页面内容超出 @page size 设定区域时，打印结果不会自动缩放
@page size 只告诉打印机“这张纸多大”，不控制内容渲染比例。如果 HTML 内容宽度超过 A4 宽度（比如未设 max-width 的表格），Chrome 会强制缩小整个页面以适配纸张，而 Firefox 可能直接截断右侧——行为不统一。
- 务必配合
@media print中的内容样式：给body加width: 210mm; margin: 0 auto;，再用box-sizing: border-box;避免 padding 把内容撑出边界 - 避免使用
position: fixed或transform的元素，它们常在打印时错位或消失 - 用
page-break-inside: avoid;控制分页，比依赖size更可靠
打印预览里看不到 @page size 效果？先检查是否触发了打印上下文
DevTools 的“打印预览”模式（Ctrl+P → “更多设置” → 勾选“显示打印预览”）才能反映 @page 生效情况；普通渲染模式下，@page 完全不参与计算，也不报错。
立即学习“前端免费学习笔记（深入）”；
- 调试时，打开打印对话框后别急着点打印，先看右下角显示的纸张名称是否变成你设的
A4 (Landscape)—— 这是唯一可信的生效信号 - 如果显示仍是“默认”或“Letter”，说明
@page规则没被识别：检查是否漏了@media print包裹、是否有语法错误（比如多了一个逗号）、或者用了 Safari 且写了非标准值
size 语法本身，而是浏览器对“打印上下文”的严格界定——它不像普通 CSS 那样宽容，少一层 @media print，整段规则就等于不存在。 
