深入解析 HTML 打印样式@media print

2025-12-20 6567阅读

在网页设计中，当需要将网页内容打印出来时，就需要用到 HTML 的打印样式@media print。它能让打印出的页面更符合阅读习惯，提升打印效果。

基本语法

@media print {
    /* 样式规则 */
}

这里的@media print 就是定义打印样式的关键部分。在这个代码块里，可以编写各种 CSS 样式规则来定制打印页面的呈现。

常见样式调整

隐藏不必要元素

@media print {
    nav, aside, footer {
        display: none;
    }
}

在打印时，导航栏、侧边栏和页脚等元素通常不需要显示，通过上述样式可以将它们隐藏，使打印内容更聚焦于正文。

调整字体和排版

@media print {
    body {
        font-family: Times New Roman;
        font-size: 12pt;
        line-height: 1.6;
    }
}

选择更适合打印阅读的字体，如 Times New Roman，调整字号和行间距，能让文字在打印纸上看起来更清晰、易读。

页面布局优化

@media print {
    @page {
        size: A4;
        margin: 2cm;
    }
}

使用@page 规则可以设置打印页面的大小，如 A4，还能调整页边距，确保打印内容布局合理。

打印背景与颜色

@media print {
    body {
        background-color: white;
    }
    a {
        color: inherit;
        text-decoration: none;
    }
}

通常打印时不需要背景颜色，将其设置为白色可节省墨水。链接在打印时也无需保留特殊颜色和下划线，让其与正文颜色一致且无装饰。

避免分页问题

@media print {
   .avoid-page-break {
        page-break-inside: avoid;
    }
}

对于一些重要的元素或段落，添加类名如 avoid-page-break，并设置 page-break-inside: avoid，可避免它们在分页时被分割。

使用案例

假设有一个博客文章页面，在打印时希望只显示正文内容，去除广告和导航栏。

<!DOCTYPE html>
<html>

<head>
    <style>
        @media print {
            nav,
           .ad {
                display: none;
            }
        }
    </style>
</head>

<body>
    <nav>导航栏</nav>
    <h1>文章标题</h1>
    <p>正文内容</p>
    <div class="ad">广告</div>
</body>

</html>

通过@media print 定义的样式，打印时导航栏和广告就不会显示，只呈现文章主体。

总之，HTML 的@media print 打印样式为网页内容的打印提供了强大的定制功能，能让打印出的页面更符合我们的需求，无论是简单的样式调整还是复杂的布局优化，都能轻松实现，提升打印文档的质量和阅读体验。