@media print 是CSS中的打印媒体查询，用于定义网页在打印或打印预览时的样式。它允许你为打印版本创建不同于屏幕显示的布局和外观。

基本语法：

@media print {
    /* 打印时生效的样式 */
    body { font-size: 12pt; color: #000; background: #fff; }
    .no-print { display: none !important; }
    a[href]::after { content: " (" attr(href) ")"; }
}

打印样式表通常放在主CSS文件的末尾，以确保样式优先级。也可以使用<link rel="stylesheet" media="print">引入独立的打印样式表。

最常见的做法是给不需要打印的元素添加一个类（如.no-print），然后在@media print中隐藏它们：

@media print {
    .no-print, nav, .sidebar, .ads, .comments, button, 
    .social-share, .newsletter-signup {
        display: none !important;
    }
    /* 或者使用 visibility */
    .hide-print { visibility: hidden; }
}

最佳实践：使用display: none完全移除元素，这样不会占用页面空间。使用!important确保覆盖内联样式。

@page 规则用于定义打印页面的尺寸、边距和方向。它在打印媒体查询中使用，控制整个页面的布局。

@page {
    size: A4;           /* 纸张尺寸：A4, Letter, Legal */
    margin: 20mm;       /* 页边距 */
    /* 或使用具体值 */
    size: 210mm 297mm;  /* 宽 × 高 */
    margin: 2cm 1.5cm;
}

/* 首页不同 */
@page :first {
    margin-top: 30mm;
}

/* 左右页不同（书籍排版） */
@page :left { margin-left: 25mm; }
@page :right { margin-right: 25mm; }

注意：浏览器对@page的支持程度不同，部分属性（如页眉页脚）支持有限。A4和Letter尺寸在主流浏览器中都有良好支持。

使用CSS的::after伪元素配合attr()函数，可以在打印时自动显示链接的URL：

@media print {
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        color: #666;
        word-break: break-all;
    }
    /* 排除内部链接和锚点 */
    a[href^="#"]::after { content: ""; }
    /* 排除相对路径的显示 */
    a[href^="/"]::after { 
        content: " (https://yoursite.com" attr(href) ")"; 
    }
}

这样打印出来的文档中，所有链接的URL都会显示在链接文字后面，方便读者查看。

大多数浏览器默认不打印背景色和背景图片以节省墨水。可以通过CSS覆盖这个行为：

@media print {
    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        color-adjust: exact;
    }
    .must-show-bg {
        background: #f0f0f0 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

用户端设置：即使设置了这些属性，用户仍可在浏览器的打印对话框中勾选"背景图形"选项来启用或禁用背景打印。Chrome默认关闭，需要用户手动开启。

使用CSS分页属性控制打印时的分页行为：

@media print {
    /* 在此元素前强制分页 */
    .new-page { page-break-before: always; }
    
    /* 在此元素后强制分页 */
    .page-end { page-break-after: always; }
    
    /* 避免在元素内部分页 */
    .keep-together { page-break-inside: avoid; }
    
    /* 避免标题后紧跟分页（标题孤行） */
    h2, h3 { page-break-after: avoid; }
    
    /* 表格行不跨页 */
    tr { page-break-inside: avoid; }
}

现代写法：CSS3推荐使用break-before、break-after、break-inside替代旧的page-break属性，兼容性已非常好。

有几种方法可以调试打印样式：

1. Chrome DevTools：打开开发者工具 → 点击右上角⋮ → More tools → Rendering → 在"Emulate CSS media type"中选择print，即可在屏幕上预览打印效果。
2. 使用本工具：本页面提供的打印视图模拟器可以在屏幕上实时查看打印效果，无需打开DevTools。
3. 打印预览：按Ctrl+P（Mac: ⌘+P）打开浏览器打印对话框查看实际效果。
4. 保存为PDF：在打印对话框中选择"另存为PDF"来查看最终输出。

• 使用pt单位：打印时使用pt（磅）作为字体大小单位更合适（1pt ≈ 1/72英寸），屏幕使用px或rem。
• 设置白色背景：确保body { background: #fff; }，避免浪费墨水。
• 优化对比度：使用黑色或深灰色文字（color: #000;或#1a1a1a;），确保可读性。
• 移除交互元素：隐藏按钮、表单、视频、iframe等不适合打印的元素。
• 显示链接URL：如上所述，让链接在打印时显示实际URL。
• 测试：在不同浏览器中测试打印效果，Chrome、Firefox、Safari的打印引擎各有差异。
• 考虑墨水消耗：避免大面积深色背景，用户通常不希望浪费彩色墨水。