使用@media print可控制打印样式，隐藏导航栏、侧边栏等非内容元素，设置字体大小12pt、黑色文字、白色背景，并通过page-break避免内容截断，@page定义页边距，chrome开发者工具可预览效果。
在html5中设计打印样式，主要通过css的 @media print 规则来控制页面在打印时的显示效果。浏览器在执行打印操作时会应用这些规则，隐藏不必要的元素、调整布局、优化字体和颜色，确保打印内容清晰、简洁。
使用 @media print 定义打印样式
在CSS中，通过 @media print 可以专门针对打印设备设置样式规则。这些样式只在用户打印页面或预览打印效果时生效，不会影响屏幕显示。
基本语法如下：
@media print { /* 打印专用样式 */ body { font-size: 12pt; color: black; } .no-print, nav, aside, footer, header { display: none !important; } .page-break { page-break-before: always; } }
常见打印样式优化技巧
为了让打印输出更专业实用，可以采用以下常用策略：
- 隐藏非内容元素：如导航栏、广告、按钮等，在打印时通常不需要。可设置
display: none隐藏。 - 调整字体和颜色：使用易读的字体大小（如12pt），确保文字为黑色，背景设为白色，避免浪费墨水。
- 移除背景图像：默认情况下，浏览器不打印背景图。若需打印，需用户手动开启“打印背景”选项，因此建议不要依赖背景展示关键信息。
- 控制分页：使用
page-break-before、page-break-after或break-inside避免内容被截断。 - 设置合适的边距：可通过
@page规则设置打印页边距：
@page { margin: 2cm; } @media print { @page :first { margin-top: 4cm; /* 首页上边距更大 */ } }
实际应用场景示例
例如，你有一个网页包含标题、导航、正文和侧边栏，只想打印正文部分：
<style> @media print { nav, aside, .ads, .button-area { display: none; } body { font-family: "Times New Roman", serif; font-size: 12pt; color: black; background: white; } h1 { font-size: 16pt; } .print-section { page-break-after: always; } } </style>
测试打印样式的方法
无需每次实际打印，可通过浏览器开发者工具预览打印效果：
- 打开 Chrome 浏览器，按 F12 打开开发者工具。
- 点击右上角三个点 → “More Tools” → “Rendering”。
- 在 “Emulate CSS media” 下拉菜单中选择 “print”，即可实时查看打印样式效果。
基本上就这些。合理使用 @media print 能显著提升打印体验，让内容更适合纸质输出。