print.css未生效主因是media属性错误，必须严格写为media="print"；打印时默认禁用背景色、颜色等，需用color-adjust: exact系列声明覆盖；推荐使用pt等绝对单位而非rem/em。
print.css 文件为什么没生效
常见现象是页面打印时样式还是浏览器默认的，print.css 里写的规则完全不触发。根本原因几乎都是 media 属性写错了——不是写成 media="print"，而是误写成 media="screen"、漏写、或拼成 media="prnt" 这类低级错误。
正确引入方式只有一种：
<link rel="stylesheet" href="print.css" media="print">注意：不是
media="all print"，也不是 media="screen, print"，后者会让浏览器在屏幕渲染时也加载它，可能干扰正常样式；而 media="print" 确保它只在打印预览/输出时解析和应用。
-
media值必须严格为print，大小写敏感 - 不要用
@import在普通 CSS 里导入 print 样式，它不被所有浏览器的打印上下文支持 - Chrome 和 Edge 的「打印预览」会实时反映
media="print"的效果，但 Safari 有时缓存旧规则，可强制 Cmd+R 刷新预览窗口
打印时字体、颜色、背景全消失了
这不是 bug，是浏览器默认行为：出于节省墨水和纸张的考虑，绝大多数浏览器（Chrome/Firefox/Safari）默认禁用背景色、背景图和非黑文字色。你写了 color: #007bff 或 background: #f0f0f0，打印预览里照样是黑字白底。
解决方法只有显式覆盖这些默认限制：
@media print {<br> * {<br> color-adjust: exact !important;<br> -webkit-print-color-adjust: exact !important;<br> print-color-adjust: exact !important;<br> }<br>}这三个属性必须同时写，因为兼容性不同：color-adjust 是标准属性，-webkit-print-color-adjust 是 Chrome/Safari 旧前缀，print-color-adjust 是新标准别名。
立即学习“前端免费学习笔记（深入）”；
- 仅加
!important不够，必须配color-adjust: exact系列声明 - 字体大小建议用
pt（如12pt）而非px或rem，避免 DPI 换算偏差 - 避免使用 Web 字体（如
@font-face），打印机环境通常不支持，会回退到系统默认字体
怎么让某些内容只在打印时出现（比如页眉页脚）
用 @media print 内联样式控制显示/隐藏最直接，但要注意：不能依赖 JavaScript 动态插入，因为打印快照是静态的，JS 已停止执行。
推荐做法是提前在 HTML 里写好打印专用区块，并用 CSS 控制：
<div class="print-only">本页共 3 页｜生成时间：2024-06-15</div><br><div class="screen-only">编辑按钮｜操作栏</div>
@media print {<br> .screen-only { display: none; }<br> .print-only { display: block; }<br>}
- 不要用
visibility: hidden替代display: none，前者仍占位，可能导致空白页 - 页码可用
@page规则实现，但仅限简单计数：@page { @top-center { content: "第 " counter(page) " 页"; } }，注意 Firefox 不支持@top-center - 如果要精确控制分页（比如不让表格跨页断裂），加
page-break-inside: avoid到table或section上
print.css 里用 rem/em 单位会出问题吗
会，而且很隐蔽。打印上下文的根字体大小（html 的 font-size）不一定等于屏幕下的值，尤其当用户调整了系统缩放或浏览器默认字号时，rem 计算结果会偏移，导致布局错乱或文字过小。
打印样式应尽量回归基础单位：pt（点）、in（英寸）、cm 或绝对 px（在打印 DPI 固定时相对稳定）。例如：font-size: 12pt 比 font-size: 0.75rem 可靠得多。
-
1pt = 1/72in，是印刷业标准单位，浏览器打印引擎对其支持最一致 - 行高建议用无单位数值（如
line-height: 1.4），避免line-height: 1.4em嵌套放大 - 边距/内边距优先用
mm或cm，比如margin: 1cm比margin: 20px更符合实际纸张留白需求
打印样式不是屏幕样式的子集，它是另一套物理输出逻辑。最容易被忽略的是：你测试时看的是「预览」，但真实打印机的 DPI、纸张尺寸、甚至驱动设置，都可能让 print.css 表现和预期不一致——务必用真机打一份出来校验。
