[!info] related notes

• 打印基础：CSS 打印媒体查询
• 所属 MOC: 浏览器开发者工具 MOC
• 相关面板: Rendering 面板, Device Mode, Elements 面板

浏览器模拟打印模式的方法

可选：创建接近 A4 比例的视口

A4 纸的 CSS 像素换算约为 794px × 1123px（按 CSS 的 96px/in 换算）。这只是纸张外框的近似，不包含打印边距；设备像素比也不等于打印机分辨率。

1. 按 F12 打开 DevTools，按 Ctrl + Shift + M 开启设备模拟 (Device Mode)。
2. 点击顶部设备下拉菜单 -> Edit -> Add custom device。
3. 创建设备：命名为 A4 Portrait，宽高设为 794 x 1123。

开启 Print 媒体类型模拟

1. 按 Ctrl + Shift + P 打开命令面板，搜索并打开 Rendering（渲染）面板。
2. 找到 Emulate CSS media type，将其更改为 print。

这会激活 print 媒体查询，可在 Elements 中查看样式层叠。普通基础规则仍然参与层叠；@page 的物理分页不会由这个视口模拟出来。

DevTools 的局限性

• 无法模拟分页断点： DevTools 里的“A4 设备”只是一个长宽固定的视口，如果内容超出 1123px 高度，它只会继续往下滚动，不会模拟真实的物理截断和换页。
• 分页检验： 用 Ctrl + P 打开目标浏览器的打印预览，检查实际纸张、页边距与缩放，再核对导出的 PDF；需要纸质交付时还要检查实体打印。