CSS @media print媒体查询特性
目录
核心用途
基本语法
常用打印样式优化
1. 隐藏不需要打印的元素
2. 调整字体和颜色
3. 控制分页
4. 显示链接的 URL
5. 优化表格和图片
打印相关属性
示例：完整的打印样式表
注意事项
总结
@media print设置页面边距
1.设置页面边距
2.设置页眉和页脚
3.使用 CSS 计数器实现页码
4.高级技巧：从元素内容生成页眉
5.完整示例
6.注意事项
7.替代方案（针对不支持的浏览器）
@media print 是 CSS 中的一个媒体查询特性，用于定义当文档被打印或预览打印效果时应用的样式。通过它，你可以优化打印内容的布局、排版和显示效果，提升纸质文档的可读性和专业性。
核心用途
-
隐藏非必要元素：如导航栏、广告、动态效果等。
-
调整排版：优化字体、间距、分页符等。
-
显示打印专用内容：如 URL、页码、版权信息。
-
节省墨水：避免大面积深色背景，改用黑白显示。
基本语法
/* 方法一：内联媒体查询 */
@media print {
/* 打印时应用的样式 */
body {
font-size: 12pt;
}
.no-print {
display: none;
}
}
/* 方法二：外部打印样式表 */
常用打印样式优化
1. 隐藏不需要打印的元素
@media print {
nav, footer, .sidebar, .ad-banner {
display: none !important;
}
}2. 调整字体和颜色
@media print {
body {
font-family: Georgia, "Times New Roman", serif; /* 衬线字体更适合阅读 */
color: #000;
background: transparent;
}
a {
color: #000;
text-decoration: underline;
}
}3. 控制分页
@media print {
.page-break {
page-break-before: always; /* 强制分页 */
}
h1, h2, h3 {
page-break-after: avoid; /* 避免标题与内容分开 */
}
table, img {
page-break-inside: avoid; /* 避免元素跨页 */
}
}4. 显示链接的 URL
@media print {
a[href]:after {
content: " (" attr(href) ")"; /* 在链接后显示URL */
}
a[href^="#"]:after {
content: ""; /* 跳过内部锚点链接 */
}
}5. 优化表格和图片
@media print {
table {
border-collapse: collapse;
}
img {
max-width: 100% !important; /* 确保图片不溢出页面 */
}
}打印相关属性
| 属性 | 描述 |
|---|---|
page-break-before |
在元素前强制分页（值：always、avoid、left、right）。 |
page-break-after |
在元素后强制分页。 |
page-break-inside |
避免元素内部被分页（值：avoid）。 |
orphans |
控制页面底部的最小行数（如 orphans: 3）。 |
widows |
控制页面顶部的最小行数。 |
print-color-adjust |
控制是否保留颜色（值：economy 或 exact）。 |
示例：完整的打印样式表
@media print {
/* 重置样式 */
* {
background: transparent !important;
color: #000 !important;
box-shadow: none !important;
text-shadow: none !important;
}
/* 隐藏导航和广告 */
header, nav, footer, .sidebar, .ad {
display: none;
}
/* 优化字体 */
body {
font-family: "Times New Roman", serif;
font-size: 12pt;
line-height: 1.5;
width: 100%;
margin: 0;
padding: 0;
}
/* 显示链接URL */
a {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
/* 调整标题 */
h1, h2, h3 {
page-break-after: avoid;
}
h1 {
font-size: 24pt;
}
h2 {
font-size: 18pt;
}
/* 优化表格和图片 */
table {
width: 100%;
border: 1px solid #000;
}
th, td {
border: 1px solid #000;
padding: 4px;
}
img {
max-width: 100%;
height: auto;
}
/* 强制分页 */
.page-break {
page-break-before: always;
}
/* 添加打印页脚 */
@page {
margin: 2cm;
}
@page :footer {
content: "© 2025 公司名称 | 第 " counter(page) " 页，共 " counter(pages) " 页";
}
}注意事项
-
测试打印效果 使用浏览器的打印预览功能（如 Ctrl+P 或 Command+P）测试样式，不同浏览器的打印表现可能略有差异。
-
慎用
!important尽量通过提高选择器优先级来覆盖样式，避免使用!important。 -
颜色与背景 默认情况下，浏览器可能不打印背景色和图像，用户需手动勾选 “打印背景颜色和图像” 选项。可通过
print-color-adjust: exact尝试强制打印。 -
分页控制
page-break-*属性是建议性的，浏览器可能不完全遵守，尤其是复杂布局。 -
性能考虑 复杂的打印样式可能增加渲染时间，尽量保持简洁。
总结
@media print 是提升用户打印体验的重要工具，通过针对性的样式优化，可以：
-
减少打印内容的冗余信息
-
提高纸质文档的可读性
-
节省打印成本（如减少彩色墨水使用）
@media print设置页面边距
在 @media print 中设置页面边距、页眉和页脚需要结合 @page 规则和 CSS 计数器功能。以下是详细的实现方法：
1.设置页面边距
使用 @page 规则的 margin 属性定义打印区域的边距：
@media print {
@page {
margin: 2cm; /* 全边距 2 厘米 */
}
/* 或单独设置各边 */
@page {
margin-top: 1.5cm;
margin-bottom: 2cm;
margin-left: 2cm;
margin-right: 2cm;
}
}支持的单位：mm、cm、in（英寸）、pt（点，1pt=1/72 英寸）。
2.设置页眉和页脚
通过 @page 的 @top-left、@top-center、@top-right、@bottom-left 等区域，可以定义静态页眉页脚：
@media print {
@page {
margin-top: 3cm; /* 为页眉留出空间 */
margin-bottom: 3cm; /* 为页脚留出空间 */
/* 页眉 */
@top-center {
content: "公司名称 | 机密文档";
font-size: 10pt;
color: #555;
}
/* 页脚 */
@bottom-center {
content: "第 " counter(page) " 页，共 " counter(pages) " 页";
font-size: 9pt;
}
}
}3.使用 CSS 计数器实现页码
通过 counter() 函数自动生成页码：
@media print {
@page {
@bottom-right {
content: "Page " counter(page); /* 简单页码 */
}
}
/* 重置页面计数器 */
body {
counter-reset: page;
}
/* 自定义页码格式 */
@page :left {
@bottom-left {
content: "文档标题 | " counter(page);
}
}
@page :right {
@bottom-right {
content: counter(page) " | 修订版 A";
}
}
}4.高级技巧：从元素内容生成页眉
如果需要从页面元素（如 ）提取内容作为页眉，可以使用 element() 函数（需浏览器支持）：
/* 标记用于页眉的元素 */
.header-content {
display: none;
}
@media print {
@page {
@top-center {
content: element(header); /* 使用 element() 引用内容 */
}
}
/* 将页面中的 h1 内容作为页眉 */
h1 {
float: running(header);
}
}5.完整示例
以下是一个包含边距、页眉、页脚和页码的完整打印样式：
@media print {
/* 设置边距 */
@page {
margin: 2.5cm 2cm; /* 上下 2.5cm，左右 2cm */
/* 页眉：左侧显示文档标题，右侧显示日期 */
@top-left {
content: "2025 年度财务报告";
font-weight: bold;
}
@top-right {
content: "打印日期: " attr(data-date);
font-size: 9pt;
}
/* 页脚：左侧显示公司信息，右侧显示页码 */
@bottom-left {
content: "© 2025 公司名称 | 机密";
font-size: 9pt;
}
@bottom-right {
content: "第 " counter(page) " 页，共 " counter(pages) " 页";
}
}
/* 隐藏非打印元素 */
nav, footer, .sidebar {
display: none;
}
/* 优化内容区域 */
body {
font-family: Georgia, serif;
font-size: 12pt;
}
/* 强制章节标题不与内容分开 */
h2, h3 {
page-break-after: avoid;
}
/* 表格不跨页 */
table {
page-break-inside: avoid;
}
}6.注意事项
-
浏览器兼容性
-
@page规则在现代浏览器中基本支持，但对@top-*和@bottom-*的支持有限（如 Firefox 不支持）。 -
element()函数目前仅 Safari 支持。
-
-
内容限制
-
页眉页脚中不能使用复杂元素（如图片、链接），只能包含文本和计数器。
-
避免在页眉页脚中使用绝对定位或浮动元素。
-
-
边距与内容冲突 确保
margin值足够大，避免页眉页脚与正文内容重叠。 -
测试方法 使用浏览器的打印预览功能（Ctrl+P 或 Command+P）检查效果，不同浏览器的渲染可能略有差异。
7.替代方案（针对不支持的浏览器）
对于不支持 @page 区域的浏览器，可以通过在页面中添加占位元素并在打印时显示：
html
预览
公司名称 | 文档标题
这种方法的缺点是无法精确控制分页，需要结合 page-break-* 属性手动调整。