CSS系列（24）-- 打印样式详解

前端技术探索系列：CSS 打印样式详解 🖨️

致读者：探索打印样式的艺术 👋

前端开发者们，

今天我们将深入探讨 CSS 打印样式，学习如何优化网页的打印体验。

打印样式基础 🚀

媒体查询

/* 打印样式表 */
@media print {
    /* 隐藏非必要元素 */
    .no-print,
    .header-nav,
    .footer,
    .ads {
        display: none !important;
    }
    
    /* 确保黑色文本 */
    body {
        color: #000;
        background: #fff;
        font-size: 12pt;
        line-height: 1.5;
    }
    
    /* 显示完整链接 */
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 90%;
    }
    
    /* 显示缩写解释 */
    abbr[title]::after {
        content: " (" attr(title) ")";
    }
}

分页控制

@media print {
    /* 避免元素被分页 */
    .keep-together {
        page-break-inside: avoid;
    }
    
    /* 强制分页 */
    .page-break {
        page-break-before: always;
    }
    
    /* 表格标题 */
    thead {
        display: table-header-group;
    }
    
    /* 避免图片被分页 */
    img {
        page-break-inside: avoid;
    }
    
    /* 章节控制 */
    h1, h2, h3 {
        page-break-after: avoid;
        page-break-inside: avoid;
    }
}

打印优化 🎯

颜色和背景

@media print {
    /* 优化颜色 */
    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    
    /* 移除背景图 */
    .background-image {
        background-image: none !important;
    }
    
    /* 确保对比度 */
    .content {
        color: #000 !important;
        background: #fff !important;
        text-shadow: none !important;
    }
    
    /* 边框优化 */
    .border {
        border-color: #000 !important;
    }
}

布局优化

@media print {
    /* 重置布局 */
    .container {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* 展开折叠内容 */
    .collapse {
        display: block !important;
        height: auto !important;
    }
    
    /* 表格优化 */
    table {
        width: 100% !important;
        border-collapse: collapse !important;
    }
    
    /* 确保表格边框 */
    table, th, td {
        border: 1px solid #000 !important;
    }
}

响应式打印 💫

页面尺寸

@media print {
    /* 设置页面尺寸 */
    @page {
        size: A4;
        margin: 2cm;
    }
    
    /* 横向打印 */
    @page landscape {
        size: A4 landscape;
    }
    
    .landscape-content {
        page: landscape;
    }
    
    /* 自定义页眉页脚 */
    @page {
        @top-center {
            content: "公司文档";
        }
        @bottom-right {
            content: "第 " counter(page) " 页";
        }
    }
}

响应式表格

@media print {
    /* 长表格处理 */
    .large-table {
        font-size: 10pt;
    }
    
    /* 确保表格标题重复 */
    thead {
        display: table-header-group;
    }
    
    tfoot {
        display: table-footer-group;
    }
    
    /* 响应式列宽 */
    .table-column {
        width: auto !important;
    }
}

特殊场景处理 ⚡

表单打印

@media print {
    /* 显示表单值 */
    input, textarea {
        border: 1px solid #999;
        background: #fff !important;
    }
    
    /* 显示选中状态 */
    input[type="checkbox"],
    input[type="radio"] {
        -webkit-appearance: none;
        border: 1px solid #000;
        width: 13px;
        height: 13px;
    }
    
    input[type="checkbox"]:checked::after {
        content: "✓";
        display: block;
        text-align: center;
        line-height: 13px;
    }
    
    /* 下拉框值 */
    select {
        appearance: none;
        border: 1px solid #999;
    }
}

代码打印

@media print {
    /* 代码块处理 */
    pre, code {
        white-space: pre-wrap !important;
        word-wrap: break-word !important;
        border: 1px solid #ccc;
        padding: 1em;
        background: #f5f5f5 !important;
        font-size: 10pt;
        font-family: "Courier New", monospace;
    }
    
    /* 行号处理 */
    .line-numbers {
        counter-reset: line;
    }
    
    .line-numbers span::before {
        counter-increment: line;
        content: counter(line);
        display: inline-block;
        width: 2em;
        text-align: right;
        margin-right: 1em;
        color: #999;
    }
}

最佳实践建议 💡

1. 内容优化

   • 必要内容保留
   • 非打印内容隐藏
   • 链接URL显示
   • 清晰的层次结构

2. 布局考虑

   • 合理分页
   • 避免内容截断
   • 表格头部重复
   • 页眉页脚设置

3. 性能优化

   • 减少墨水使用
   • 优化图片
   • 控制文件大小
   • 提高打印速度

4. 测试验证

   • 多浏览器测试
   • 不同纸张尺寸
   • 打印预览
   • 实际打印效果

写在最后 🌟

打印样式虽然常被忽视，但对于提供完整的用户体验至关重要。通过合理的CSS打印样式设置，我们可以确保内容在打印时依然保持良好的可读性和专业性。

进一步学习资源 📚

• 打印样式指南
• 浏览器打印功能
• 常见问题解决
• 最佳实践案例

---

如果你觉得这篇文章有帮助，欢迎点赞收藏，也期待在评论区看到你的想法和建议！👇

终身学习，共同成长。

咱们下一期见

💻

原文地址：https://blog.csdn.net/Chen7Chan/article/details/144583293

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！