打印样式必须用@media print包裹，正确引入方式为或内联@media print{...}；需隐藏交互元素但保留语义结构，强制黑白、调整字号适配纸张，慎用web font，分页控制优先用break-inside: avoid并真机测试。
打印样式表必须用 @media print 包裹，否则浏览器直接忽略
浏览器只在明确的打印媒体查询下才加载或应用对应样式，link 标签没加 media="print"、或者 CSS 里漏写 @media print，样式就完全不生效。常见错误是把打印样式写在默认样式块里，结果页面看着正常，一按 Ctrl+P 就回归浏览器默认排版。
- 正确引入方式：
<link rel="stylesheet" href="print.css" media="print"> - 内联写法必须带
@media print { ... }，不能只写.header { display: none; } - Chrome 和 Edge 的「另存为 PDF」功能也走同一套
@media print逻辑，不是特殊通道
display: none 会彻底隐藏内容，但小心删掉关键信息
很多人一上来就把导航、广告、侧边栏全用 display: none 干掉，结果连页码、标题、数据来源都消失了。打印场景下，用户需要的是可追溯、可归档的干净内容，不是“越空越好”。
- 优先隐藏交互元素：
.navbar、.btn、.modal这类纯屏幕用组件 - 保留语义结构：
<h1></h1>、<table>、<code><footer></footer>建议留着，哪怕重设样式 - 特别注意：被
display: none的元素，其子元素无论怎么设置display: block都不会显示 - 强制转黑白：
color: #000 !important;+background: #fff !important;（避免某些浏览器默认不打背景） - 字号建议 ≥ 10pt（等价于
13.33px），正文用font-size: 12pt更稳妥 - 慎用 web font：多数打印机环境不联网，
@font-face加载失败就回退到系统字体，结果不可控 - 表格行分页最头疼：给
tr加break-inside: avoid无效，得作用于tbody或整张table - 长图片/图表建议加
max-width: 100%; height: auto;，否则容易撑破单页 - Chrome 115+ 开始支持
break-after: recto（奇数页起始），但兼容性差，目前仍建议用 JS 动态插空白页更可控
字体、颜色、尺寸要适配纸张，别信屏幕上的“看着还行”
屏幕靠背光显色，纸张靠反射，#007bff 在屏幕上醒目，在黑白打印机上可能只剩灰蒙蒙一团；14px 字体在 Retina 屏很舒服，打出来小得费眼。打印样式不是屏幕样式的简化版，是另一套物理约束下的方案。
分页控制用 page-break-inside: avoid 比想象中难搞
page-break-before 和 page-break-after 看似直观，但实际渲染时浏览器常无视——尤其在 flex 或 grid 布局里。真正靠谱的是组合使用 break-inside: avoid（新版标准）和兜底的 page-break-inside: avoid，并确保父容器没设 overflow: hidden 或 transform。
立即学习“前端免费学习笔记（深入）”；
打印样式真正的难点不在写多少规则，而在于你永远没法预判用户用什么型号打印机、什么驱动版本、是否开了「背景图形」开关——所以每次改完，必须真机打印测试，PDF 导出只是第一关。
