HTML媒体查询如何使用print媒体类型编写打印专属的样式表

使用@media print编写打印专属样式表，通过隐藏非必要元素、重置颜色背景、优化字体分页等提升纸质输出效果，支持内联或外链引入，调试可借助开发者工具模拟打印媒体类型。

使用 print 媒体类型编写打印专属样式表，核心是通过 @media print 规则定义仅在打印（或打印预览）时生效的 CSS 样式，隐藏非必要内容、调整布局、优化可读性。

用 @media print 定义打印专用样式

直接在现有样式表中添加 @media print 块，或单独引入一个专用于打印的 CSS 文件。浏览器在用户点击“打印”或进入打印预览时，自动启用这些规则。

1. 写法示例（内联写法）：

   @media print {

   body { font-size: 12pt; color: #000; background: none; }

   .sidebar, .nav, .ads { display: none; }

   }

2. 外部引入方式：

   <link rel="stylesheet" href="print.css" media="print">，该文件只在打印时加载

打印样式关键优化点

网页默认样式不适合纸张输出，需针对性调整：

1. 隐藏干扰元素：导航栏、广告、侧边栏、背景图、按钮等与内容无关的 UI 元素设为 display: none
2. 重置颜色与背景：禁用背景色和图片（background: transparent !important），确保文字在白纸上清晰可读；避免深色文字配浅色背景导致反白打印
3. 适配字体与尺寸：优先使用衬线字体（如 serif），字号建议 10–12pt；行高设为 1.4–1.6，提升纸质阅读舒适度
4. 控制分页行为：用 page-break-before、page-break-after 或现代 break-before 避免标题孤行、表格断开；对图片/块级元素加 break-inside: avoid

常见兼容性与调试技巧

不同浏览器对打印样式的解析略有差异，需注意：

1. Chrome 和 Edge 打印预览实时反映 @media print 效果，Firefox 类似；Safari 对某些属性支持较弱（如 break-inside）
2. 调试时不必反复打印纸张——打开浏览器开发者工具 → 切换至「Rendering」面板 → 勾选 “Emulate CSS media type” 并选 print
3. 若页面含大量 JS 动态渲染内容，确保打印前 DOM 已就绪；必要时可监听 beforeprint / afterprint 事件做临时处理

实用小技巧：保留链接 URL

纯文本打印时超链接不可见，可用 CSS 伪元素补充地址：

1. @media print {

   a[href]:not([href^="#"])::after {

   content: " (" attr(href) ")";

   font-size: 9pt;

   color: #666;

   }

   }

2. 配合 a[href^="http"] 可进一步限定仅外链显示 URL，避免内部锚点冗余