@media print 是唯一稳定生效的打印样式控制方式，因其直接由浏览器渲染引擎解析，不受JS执行时机、iframe隔离限制或@page兼容性影响；未生效主因是屏幕样式权重覆盖，需用更具体选择器、分离媒体查询、禁用!important、启用“打印背景图形”，并显式隐藏非内容元素。

@media print 是唯一能稳定生效的打印样式控制方式，其他方案（比如靠 JS 拦截打印事件、用 iframe 隔离、或依赖 @page）在 Chrome/Firefox/Edge 上表现不一致，容易漏规则或完全失效。

为什么直接写 @media print 常常没反应

不是语法错，而是被屏幕样式覆盖了——浏览器不会自动给 @media print 更高优先级。哪怕你写在 CSS 文件末尾，只要选择器权重一样，.header { display: block; } 这种无媒体查询的规则仍会赢。

• 用更具体的选择器，比如把 .header 改成 body .header 或 div#app .header
• 避免在同一个 CSS 文件里混写 @media screen 和 @media print，旧版 Safari 会解析错
• 别依赖 !important 去压屏幕样式：它在某些打印引擎里会被忽略，或导致后续调试失焦
• 检查是否启用了「打印背景图形」选项：Chrome 默认关闭，background-color 再写也白搭

哪些元素必须显式隐藏，且怎么写才真正消失

导航栏、广告位、按钮、加载提示这些不会自动“知道”自己不该上纸——不声明，它们就照常渲染，轻则挤占正文，重则生成空白页。

• 统一加 class 如 no-print，然后写 @media print { .no-print { display: none !important; } }
• 不要用 visibility: hidden：它保留盒模型空间，可能让段落错位、分页线偏移
• JS 动态插入的内容（如 .loading、.modal）也要一并加入隐藏列表
• iframe 不继承父页的 @media print，得单独处理其内容或提前提取

字体、单位、分页这三处最容易崩，怎么设才稳

用 rem/em/px 打印时尺寸不可控；表格跨页、图片溢出、标题孤行，全是分页逻辑没对齐的表现。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

• 字号强制用 pt：正文字体写 font-size: 12pt（≈16px），标题用 14pt 或 16pt，禁用 %、em、rem
• 字体栈用系统安全字体：font-family: "Microsoft YaHei", SimSun, serif;，禁用 Web Font
• 关键容器加 page-break-inside: avoid：对 table、.section、.card 这类块级结构必须加
• 链接要暴露 URL：a[href]:after { content: " (" attr(href) ")"; font-size: 9pt; color: #666; }，否则纸上只剩“查看详情”这种废文本

用 还是内联 @media print

外部文件方式更可靠，尤其上线后要长期维护的项目。

• 写法必须是 ，media="PRINT" 或 media="screen,print" 都会失效
• 构建工具（如 Webpack）要确保 print.css 不被合并进主 CSS 包，否则媒体查询可能被错误压缩或丢弃
• 内联写法（）调试方便，但无法利用缓存，且易被其他 !important 覆盖
• 真机打印前，务必在 Chrome、Edge、Firefox 的打印预览里手动翻页检查两次——分页逻辑差异太大，光靠 DevTools 模拟 media type 看不出问题

最常被忽略的是：打印样式不是“写完就跑”，而是要验证每一页的实际断点。有些打印机驱动会在输出前二次缩放，A4 尺寸偏差可能达 2mm，这点只在真机吐纸那一刻才暴露。

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