通过link标签的media属性可实现打印样式独立加载，仅在打印时应用print.css，避免影响屏幕显示。使用指定打印样式，结合screen和print分别加载不同CSS，提升性能与可读性。print.css应隐藏非内容区域、设置黑白配色、控制分页，并可通过媒体查询进一步适配小尺寸纸张。利用浏览器打印预览功能可实时验证效果。
css for print screen media实践">
在网页开发中，我们经常需要为不同设备或输出场景提供不同的样式表现。打印页面就是一个典型场景。通过 标签结合媒体查询（media attribute），可以实现仅在打印时加载特定的 CSS 文件，从而优化打印效果，同时不影响屏幕浏览体验。
使用 media 属性指定 print 媒体类型
HTML 的 标签支持 media 属性，用于控制样式表在何种设备或输出媒介下生效。要实现打印专用样式，只需将 media 设置为 print：
这段代码表示：只有在用户尝试打印页面或预览打印效果时，print.css 才会被加载和应用。如果是普通屏幕浏览，该文件不会影响页面渲染。
为不同媒体类型加载多个样式表
你可以同时定义多个 标签，分别针对不同媒介：
立即学习“前端免费学习笔记（深入）”；
其中：
-
screen.css专为显示器设计，包含颜色、背景图、布局动画等视觉元素 -
print.css则专注于排版清晰、去除干扰元素（如导航栏、广告）、设置合适的页边距与字体大小
这种分离方式让样式管理更清晰，也提升了性能——打印时不加载不必要的屏幕样式资源。
实践建议：编写高效的 print.css
一个良好的打印样式应关注可读性与简洁性。常见做法包括：
- 隐藏非内容区域：
header, nav, aside, footer { display: none; } - 设置黑白为主色调，避免浪费墨水
body { color: #000; background: #fff; } - 自动添加外部链接在括号内显示（便于纸质阅读）
- 使用分页控制避免内容被截断
h1, h2 { page-break-before: always; }.no-break { page-break-inside: avoid; }
你也可以合并使用多种媒体类型：
这适用于响应式设计中对小尺寸打印纸张做进一步优化。
验证打印效果的小技巧
在浏览器中按下 Ctrl+P（或 Cmd+P）打开打印预览，即可实时查看 print.css 的实际效果。开发者工具中的“Rendering”面板也可切换渲染媒介模拟 print 视图。
基本上就这些。通过合理使用 ，你能轻松实现按需加载打印样式，提升用户体验又不增加主页面负担。
