很多人做个人主页的时候只关注屏幕上的显示效果，往往忽略了打印场景。想象一下，访问者觉得你的个人简历页面不错，直接按Ctrl+P打印出来，结果页面上方的导航菜单、侧边的公告栏全被印在纸上，正文却被挤到第二页去了一半。这种体验显然不合格。给HTML页面添加专门的打印样式，核心就是利用CSS的媒体查询机制，让浏览器在打印时套用另一套规则。下面详细介绍具体的实现思路和常用技巧。
一、打印样式表的三种接入方式
要给页面加打印样式，首先得知道CSS在什么位置声明。第一种方式是使用@media print媒体查询，直接写在现有样式表里，这是目前最常用的写法，维护起来也方便：
@media print {
/* 这里写的规则只在打印时生效 */
.nav, .sidebar, .footer-ad {
display: none;
}
body {
font-size: 12pt;
color: #000;
}
}
第二种方式是在HTML头部引入独立的打印样式文件，通过<link>标签的media属性指定生效环境。这种方式把打印样式和屏幕样式彻底分离，适合打印规则比较庞大的项目：
<link rel="stylesheet" href="print.css" media="print">
第三种方式是在<style>标签上直接声明media="print"，效果和第二种类似。三种方式各有取舍：媒体查询方式不需要额外的HTTP请求，适合中小页面；独立文件方式结构清晰，但要注意加载顺序。另外还有一种@import的写法，比如@import url("print.css") print;，不过因为会影响加载性能，现在基本不推荐使用了。
二、隐藏无关元素与优化打印排版
打印样式里最核心的一件事，就是决定哪些内容值得被印在纸上。导航栏、搜索框、按钮、悬浮广告、返回顶部组件，这些交互性元素在纸面上毫无意义，应该统一隐藏。推荐的做法是在打印样式里给这些元素统一加上display: none。相比之下visibility: hidden只是不可见，占用的空间还在，会导致纸上留出大片空白，一般不用它来做隐藏。
@media print {
/* 隐藏一切交互类元素 */
nav, aside, .btn, .share-bar, #back-to-top {
display: none;
}
/* 让主内容撑满整个页面宽度 */
main {
width: 100% !important;
margin: 0;
padding: 0;
}
/* 去掉屏幕上为了美观加的阴影和圆角 */
.card {
box-shadow: none;
border: 1px solid #ccc;
border-radius: 0;
}
}
单位的选择也有讲究。屏幕上我们习惯用px和rem，但纸张世界的主人是pt（磅）和cm。正文字号设成12pt左右比较接近常规文档的阅读体验，标题可以设成16pt到20pt。页面边距可以交给@page规则控制，比如@page { margin: 2cm; }，各浏览器的支持度已经不错。如果屏幕版式用了flex或者grid布局，打印时内容被挤压变形，可以考虑在打印样式里退回普通的块级排版。
还有一个常见坑：默认情况下浏览器不会打印背景色和背景图。如果页面上有需要保留的背景色块（比如表头底色），需要加上-webkit-print-color-adjust: exact;，同时提醒用户在打印对话框里勾选“背景图形”选项，两个条件缺一不可。
三、分页控制与链接地址处理
长内容打印时最怕被从中间硬切开，比如一张表格印到一半，表头在上一页，数据在下一页。CSS提供了几个分页相关的属性来处理这类问题：page-break-before、page-break-after和page-break-inside，它们分别控制元素前、后、内部是否允许分页。新的写法是break-before、break-inside这一族属性，现代浏览器都支持。
@media print {
/* 每个板块从新的一页开始 */
section {
break-inside: avoid;
page-break-inside: avoid;
}
/* 标题不要孤零零留在页面底部 */
h2, h3 {
break-after: avoid;
page-break-after: avoid;
}
/* 表格和图片不要被切断 */
table, img, figure {
break-inside: avoid;
page-break-inside: avoid;
}
/* 强制分页 */
.page-break {
break-before: page;
page-break-before: always;
}
}
链接的处理是打印场景特有的问题。屏幕上超链接靠点击就能跳转，但印在纸上之后，用户看到的只有带下划线的文字，完全不知道要跳去哪里。一个贴心的做法是在打印样式中把链接的href地址显示出来，利用::after伪元素配合attr()函数就能实现，参考链接的地址一般以纯文本形式跟在文字后面。这个技巧能让打印稿的信息完整度大幅提升：
@media print {
a[href^="http"]::after {
content: " (" attr(href) ")";
font-size: 10pt;
color: #555;
}
}
页面的方向也可以通过@page设置。个人简历类页面纵向就够了，但如果是宽表格或作品展示，可以设置@page { size: A4 landscape; }让纸张横向打印。需要留意的是size属性对打印对话框的影响在不同浏览器上略有差异，建议作为建议性设置而非强制依赖。
四、一份可直接套用的完整示例
下面是一个简单个人页面的完整打印样式示例，把前面提到的技巧整合到了一起，可以直接复制到项目里按需删改。页面结构假设包含顶部导航、主内容区、侧边栏和页脚四部分：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>个人主页</title>
<style>
/* 屏幕样式 */
body { font-family: "Microsoft YaHei", sans-serif; margin: 0; }
.nav { background: #333; color: #fff; padding: 12px; }
.container { display: flex; gap: 20px; padding: 20px; }
main { flex: 1; }
aside { width: 260px; background: #f5f5f5; padding: 15px; }
/* 打印样式 */
@media print {
@page { size: A4; margin: 1.5cm; }
.nav, aside { display: none; }
.container { display: block; padding: 0; }
body {
font-size: 12pt;
color: #000;
background: #fff;
}
h1 { font-size: 20pt; margin-bottom: 4pt; }
h2 { font-size: 15pt; border-bottom: 1pt solid #000; padding-bottom: 2pt; }
.info-item { break-inside: avoid; }
a[href^="http"]::after {
content: " (" attr(href) ")";
font-size: 9pt;
}
}
</style>
</head>
<body>
<div class="nav">导航：首页 | 作品 | 联系我</div>
<div class="container">
<main>
<h1>张三的个人主页</h1>
<p>前端开发工程师，五年经验，擅长页面还原与打印排版优化。</p>
<h2>项目经历</h2>
<div class="info-item">
<p>企业官网改版：<a href="https://www.ipipp.com">查看详情</a></p>
</div>
</main>
<aside>
<h3>公告</h3>
<p>这里的内容打印时会被隐藏。</p>
</aside>
</div>
</body>
</html>
写完打印样式之后，调试方法很简单：在Chrome开发者工具中按F12，点击右上角的三点菜单，选择More tools里的Rendering，把Emulate CSS media print勾上，页面就会以打印模式渲染，不用真的浪费纸去试。也可以直接用打印预览功能确认效果。建议重点检查这几个点：无关模块是否隐藏干净、字号在纸面上是否清晰、内容有没有被意外截断、链接地址显示是否符合预期。把这些细节处理到位，你的个人页面在纸上的观感不会输给任何一份排版良好的文档。
打印样式print mediamedia print修改时间：2026-09-08 11:53:16