media="print"是唯一让浏览器在打印上下文加载样式的硬性条件，其他写法如media="all"或漏写该属性均会失效；必须严格小写、置于head内、配全rel="stylesheet"，且需通过devtools模拟print媒体或真实ctrl+p预览验证。

media="print" 是唯一能让浏览器在打印上下文加载并应用样式表的硬性条件，其他写法（比如 media="all" 或漏掉该属性）在真实打印中大概率失效。

为什么 print 样式表总不生效？

不是代码没写，而是浏览器根本没让它“活”起来——media="print" 的样式表在普通浏览时完全不参与渲染，Network 面板里看不到请求、Elements 面板里显示为灰色、Styles 面板里查不到规则，这都属正常。常见误判点：

• 用 Ctrl+P 打开又取消，反复试几次就以为“没反应”，其实得真进打印预览才触发
• 写了 media="print" 却把 <link> 放在 里，导致部分旧浏览器直接忽略
• 路径写错（比如少个 css/ 前缀），控制台报 Failed to load resource 但被你忽略了
• 主样式表里有未加 @media print 限定的全局规则（如 body { margin: 0 }），把 print 样式覆盖掉了

怎么验证 media="print" 真正起作用？

别靠反复 Ctrl+P，效率低还容易漏细节。用 DevTools 实时模拟才是正解：

• 打开 DevTools（F12 或 Cmd+Opt+I）
• 右上角「⋯」→ More Tools → Rendering
• 勾选 Emulate CSS media，下拉选 print

此时页面立刻变样：背景白、文字黑、.no-print 元素消失、分页线可能浮现——这才是真正进入打印上下文的表现。注意：media 值大小写敏感，PRINT 或 print （带空格）都不行。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

link 标签必须放 head 里，且不能省略 rel="stylesheet"

<link> 放在 中会导致 FOUC（无样式内容闪现），IE6–8 更是直接跳过不加载。同时，rel="stylesheet" 必须全小写、不可省略，否则浏览器当普通链接处理，样式压根不会解析。

• 正确写法：<link rel="stylesheet" href="print.css" media="print">
• 错误写法：<link rel="styleSheet" href="print.css" media="print">（大小写错）
• 错误写法：<link href="print.css" media="print">（缺 rel）
• 错误写法：<link rel="stylesheet" href="print.css" media="print">（位置错）

打印样式调试时最易忽略的三个点

很多样式在预览里看着对，一导出 PDF 或真机打印就变形，问题常出在这些隐性细节上：

• display: none 虽能隐藏元素，但会破坏屏幕阅读器可访问性；更稳妥的是用 visibility: hidden + position: absolute 移出可视区
• 慎用 %、em、rem 这类相对单位，打印引擎对它们的解析不稳定；优先用 pt 或 in（如 font-size: 12pt）
• 外部资源（比如 background-image: url(...)）在多数打印驱动里默认禁用，背景色也常被用户设置“不打印背景图形”给关掉

真正可靠的调试方式，是每次改完都导出 PDF 再打开看——浏览器打印预览只是近似模拟，不是最终结果。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！