使用@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; /* 首页上边距更大 */
}
}
实际应用场景示例
例如，你有一个网页包含标题、导航、正文和侧边栏，只想打印正文部分：测试打印样式的方法
无需每次实际打印，可通过浏览器开发者工具预览打印效果：- 打开 Chrome 浏览器，按 F12 打开开发者工具。
- 点击右上角三个点 → “More Tools” → “Rendering”。
- 在 “Emulate CSS media” 下拉菜单中选择 “print”，即可实时查看打印样式效果。
基本上就这些。合理使用 @media print 能显著提升打印体验，让内容更适合纸质输出。
