必须显式声明 media="print"，否则浏览器不加载、不解析、不应用；大小写敏感且不可有空格；media="all"或省略media属性等同默认all，部分Chrome会跳过；screen,print影响首屏性能；DevTools中样式灰色属正常；验证需用Rendering面板模拟print；print.css内禁用@media print嵌套；应隐藏非内容元素、用pt单位、写死中文字体、启用color-adjust、暴露链接地址、约束图片尺寸；路径问题易致404；调试优先查Computed面板print计算值。
必须显式声明 media="print"，否则浏览器压根不加载、不解析、不应用——写了 @media print 也白搭。
为什么写了 media="print" 却没效果
不是 CSS 写错了，而是浏览器根本没把它纳入打印渲染流程：
-
media="PRINT"或media=" print"（前后带空格）无效——大小写敏感，且不能有额外空白 -
media="all"或漏写media属性，等同于默认all，但部分 Chrome 版本和打印驱动会跳过它 -
media="screen,print"会让浏览器在页面加载时就下载该 CSS，干扰首屏性能，上线前务必改回print - DevTools 的 Elements/Styles 面板里看到样式是灰色或标为 “inactive”，属正常现象——它只在打印上下文激活
怎么验证 media="print" 真生效了
别反复按 Ctrl+P → 取消 → 再 Ctrl+P。用 DevTools 实时模拟更准：
- 打开 DevTools（F12 或 Cmd+Opt+I）
- 右上角「⋯」→ More Tools → Rendering
- 勾选 Emulate CSS media，下拉选
print - 此时页面立刻重绘，
window.matchMedia('print').matches返回true，可配合 JS 控制打印前逻辑
print.css 里该写什么才真正起作用
整个文件就是为打印服务的，**不要套一层 @media print { }**——那是冗余且易出错的写法：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 隐藏非内容元素：
.header, .nav, .ad, .btn { display: none !important; }；避免用visibility: hidden，它保留盒模型空间，会导致分页错位 - 字体和单位用物理值：
font-size: 12pt（≈16px），禁用rem、%、em；中文字体栈写死：font-family: "Microsoft YaHei", SimSun, serif; - 强制输出背景色/图片：
body { -webkit-print-color-adjust: exact; color-adjust: exact; }；Chrome 默认关闭“背景图形”，光写background-color没用 - 链接要暴露地址：
a:link, a:visited { color: #000 !important; text-decoration: none; } a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #666; } - 图片约束尺寸：
img { max-width: 100% !important; height: auto !important; }，否则高 DPI 图片可能撑破 A4 纸
容易被忽略的路径与资源问题
print.css 里的相对路径（比如 background: url(../img/logo-print.png)）在打印上下文里不一定能解析：
- 如果页面通过
iframe加载，或存在跨域策略，这些资源大概率 404 或被拦截 - 不要假设它和屏幕样式一样“自然可用”——导出 PDF 或真实打印时才暴露问题
- 建议把关键图片转为内联 base64，或确保
print.css所在路径与资源路径在同域且可公开访问
最常崩的不是语法，而是单位、路径、权重、浏览器默认限制这四点交叉作用。调试时切记：先用 DevTools 的 Computed 面板切换到 print 媒体看最终计算值，再反推哪条规则被覆盖或未加载。
