在网页开发中，打印功能的样式适配是很多项目需要处理的场景，默认的打印样式会直接沿用屏幕显示的样式，导致打印出来的内容包含大量无用元素，样式混乱。通过CSS的media规则可以针对打印场景单独设置样式，其中使用media="print"是最常用的方式。
什么是media="print"
media是CSS中用于指定样式适用媒介的属性，print是媒介类型的一种，代表打印设备。当给样式表或者样式规则设置media="print"时，这些样式只会在页面被打印时生效，在屏幕显示时不会产生影响。
在HTML中引入打印样式的常见方法
方法一：使用link标签引入单独的打印样式表
这是最推荐的方式，将打印样式和屏幕样式分离，便于维护。在HTML的<head>标签中添加如下代码：
<!-- 屏幕样式 --> <link rel="stylesheet" href="screen.css" media="screen"> <!-- 打印样式 --> <link rel="stylesheet" href="print.css" media="print">
在print.css中就可以专门编写打印相关的样式，比如隐藏不需要打印的元素：
/* 隐藏导航栏、侧边栏、广告等不需要打印的元素 */
.nav, .sidebar, .ad {
display: none;
}
/* 调整打印内容的字体大小和行高，更适合阅读 */
.main-content {
font-size: 12pt;
line-height: 1.5;
}
/* 去除打印时的背景色，节省墨水 */
body {
background-color: white;
color: black;
}
方法二：在style标签中使用@media规则
如果不想单独创建打印样式文件，也可以在同一个CSS文件或者<style>标签中使用@media print规则包裹打印样式：
<style>
/* 屏幕样式 */
body {
background-color: #f5f5f5;
font-size: 16px;
}
/* 打印样式 */
@media print {
.header, .footer {
display: none;
}
body {
background-color: white;
font-size: 12pt;
}
/* 给打印的页面添加页眉页脚样式 */
@page {
margin: 2cm;
}
}
</style>
方法三：直接在CSS属性中指定media
也可以在单个样式规则中指定media属性，不过这种方式适用场景较少，维护性较差：
/* 这条规则只在打印时生效 */
@media print {
.no-print {
display: none;
}
}
打印样式的常用配置技巧
- 隐藏不需要打印的元素：通过
display: none隐藏导航、按钮、广告等和打印内容无关的部分。 - 调整字体和颜色：打印时建议使用衬线字体，字体大小设置为pt单位，颜色使用黑色，去除背景色减少墨水消耗。
- 控制页面边距：使用
@page规则可以设置打印页面的边距、纸张方向等属性。 - 避免内容被截断：对于表格、长段落等内容，可以设置
page-break-inside: avoid避免内容在打印时被分页截断。
注意事项
需要注意media="print"的样式只在打印预览和打印输出时生效，不会影响页面在屏幕上的显示效果。如果同时设置了screen和print的样式，浏览器会根据当前场景自动选择对应的样式应用。另外不同浏览器的打印渲染可能存在细微差异，开发完成后建议在常用浏览器中测试打印效果。
下面是一个完整的HTML示例，演示了如何使用media="print"控制打印样式：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>打印样式示例</title>
<style>
/* 屏幕样式 */
body {
font-family: "Microsoft YaHei", sans-serif;
background-color: #f0f0f0;
padding: 20px;
}
.nav {
background-color: #333;
color: white;
padding: 10px;
margin-bottom: 20px;
}
.content {
background-color: white;
padding: 20px;
border-radius: 5px;
}
.print-btn {
padding: 8px 16px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 20px;
}
/* 打印样式 */
@media print {
.nav, .print-btn {
display: none;
}
body {
background-color: white;
padding: 0;
}
.content {
border: none;
padding: 0;
}
@page {
margin: 1.5cm;
}
}
</style>
</head>
<body>
<div class="nav">网站导航栏</div>
<div class="content">
<h1>文章标题</h1>
<p>这是文章的正文内容，打印时只会显示这部分内容和标题，导航栏和打印按钮会被隐藏。</p>
<p>更多正文内容，更多正文内容，更多正文内容。</p>
</div>
<button class="print-btn" onclick="window.print()">打印页面</button>
</body>
</html>
CSSHTMLprint_media打印样式修改时间：2026-06-22 23:13:04