怎样用CSS媒体查询针对打印样式进行响应式优化-css教程-PHP中文网

使用 @media print 媒体查询可以针对打印样式进行响应式优化，通过隐藏屏幕专属元素、调整布局为单栏并重置字体颜色来确保打印效果。具体做法是在 css 中定义该查询块，将背景色设为白色，文字设为黑色，并移除导航和按钮等无关内容。

怎样用CSS媒体查询针对打印样式进行响应式优化

如何隐藏非打印元素并重置页面布局

在 @media print 块中，通过设置 display: none 隐藏不需要打印的 UI 组件，并将主容器宽度设为 100% 以消除侧边栏干扰。同时，强制覆盖内联样式中的背景色，确保文字清晰可读。

怎样用CSS媒体查询针对打印样式进行响应式优化



    <meta charset="UTF-8"><title>Print Optimization</title><style>
        /* 屏幕端基础样式 */
        body { font-family: sans-serif; margin: 0; padding: 20px; background-color: #f4f4f4; }
        .container { max-width: 960px; margin: 0 auto; display: flex; }
        .sidebar { width: 250px; background: #ddd; padding: 10px; }
        .content { flex: 1; background: white; padding: 20px; }
        .btn { padding: 10px 20px; background: blue; color: white; border: none; cursor: pointer; }

        /* 打印端优化样式 */
        @media print {
            body {
                background-color: white !important;
                color: black !important;
                margin: 0;
                padding: 0;
            }
            .container {
                display: block;
                width: 100%;
                max-width: none;
            }
            .sidebar,
            .btn,
            .no-print {
                display: none !important;
            }
            .content {
                padding: 0;
                width: 100%;
            }
            a {
                text-decoration: underline;
                color: black;
            }
        }
    </style><div class="container">
        <aside class="sidebar no-print"><h3>Navigation</h3>
            <ul>
<li>Home</li>
<li>About</li>
</ul></aside><main class="content"><h1>Document Title</h1>
            <p>This is the content to be printed.</p>
            <a href="#">Link Example</a>
            <button class="btn">Click Me</button>
        </main>
</div>

运行上述代码并调用浏览器打印预览（Ctrl+P），可以看到侧边栏和按钮被完全隐藏，背景变为纯白，且链接带有下划线以便识别。这种布局切换确保了打印输出专注于核心文本内容。

如何处理分页与页眉页脚控制

利用 page-break-before 和 page-break-after 属性可以精确控制打印时的分页位置，避免内容被截断。同时，可以通过 @page 规则设置纸张大小和边距，进一步优化打印输出的视觉效果。

怎样用CSS媒体查询针对打印样式进行响应式优化

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

<style>
    @media print {
        @page {
            size: A4;
            margin: 2cm;
        }
        h2 {
            page-break-after: avoid;
        }
        p {
            orphans: 3;
            widows: 3;
        }
        .section {
            page-break-inside: avoid;
        }
    }
</style><div class="section">
    <h2>Section 1</h2>
    <p>Content for section 1...</p>
</div>
<div class="section">
    <h2>Section 2</h2>
    <p>Content for section 2...</p>
</div>

在上述代码中，.section 类应用了 page-break-inside: avoid，防止段落内部被分页切断。orphans 和 widows 属性确保每页至少保留三行文字，提升阅读体验。这些设置共同作用，使长文档打印时结构更清晰。

当打印内容包含表格时如何防止列宽溢出

在打印样式中，表格列宽容易因屏幕自适应而变形，需显式设置 table-layout: fixed 并为单元格指定最小宽度。同时，移除边框阴影和背景渐变，改用实线边框以保证打印清晰度。

<style>
    @media print {
        table {
            width: 100%;
            table-layout: fixed;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            min-width: 100px;
        }
        th {
            background-color: #eee !important;
            color: black !important;
        }
    }
</style>