@media print规则未生效需先确认是否被加载：打开真实打印预览（Ctrl+P/Cmd+P），检查Computed面板中print媒体下的样式是否生效，运行window.matchMedia('print').matches验证是否进入打印模式，确保用静态引入且无CORS或路径错误。

@media print 规则没生效，先确认是否真被加载

写了 @media print 却完全没反应，不是语法错误，而是规则压根没进打印上下文。Chrome DevTools 的「Emulate CSS media type → print」只改渲染，不触发真实分页逻辑，更不验证样式是否被浏览器加载。

实操建议：

• 打开打印预览（Ctrl+P / Cmd+P），右键检查页面元素，看 computed 样式里有没有你写的 display: none 或 color: #000
• 在控制台运行 window.matchMedia('print').matches，返回 true 才说明已进入打印模式
• 确保样式表是静态引入的：，别用 JS 动态插入或 CSS-in-JS 注入（如 styled-components 默认不支持 print 媒体类型）
• 检查是否有框架覆盖：Bootstrap 的 .navbar 带 !important，你的 .navbar { display: none; } 就会被压垮——得写成 body .navbar { display: none !important; }

哪些元素必须显式隐藏，且不能只靠 display: none

导航栏、侧边栏、按钮、广告位这些不会自动消失，但仅加 display: none 可能引发塌陷、浮动残留或 flex 换行错乱，导致正文挤成窄条甚至整页空白。

实操建议：

• 统一隐藏非内容结构：@media print { .nav, .sidebar, .ads, .btn, .loading, .modal, .toast { display: none !important; } }
• 同步重置布局属性：* { float: none !important; position: static !important; overflow: visible !important; }
• 慎用 visibility: hidden：它保留盒模型空间，打印时照样占行、撑出空白页
• 响应式类无效：.d-md-none 在 print 下不生效，得单独写 @media print { .d-md-none { display: block !important; } }

表格、分页和字体在打印中崩得最狠，怎么稳住

表格跨页断裂、标题和正文被硬切、小字号糊成一片——这些问题不是“看起来不好”，是打印机驱动直接丢弃或二次缩放导致的物理输出失败。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

实操建议：

• 表格必须加 page-break-inside: avoid !important 到 元素上， 上加无效
  用 display: table-header-group !important，但 Safari 可能不认，稳妥做法是复制表头到每页开头
  正文字号至少 12pt（不是 12px），避免用 rem 或 %，高 DPI 打印机对缩放不可控
  防截断：给长段落或列表加 break-inside: avoid，关键节点前插
  背景色要打印出来？必须同时写：background: #fff !important; -webkit-print-color-adjust: exact; color-adjust: exact;

  Chrome 打印预览和真机输出差距大，怎么验证才靠谱

  开发者工具里的 print 模拟只管样式是否加载，不管分页线、纸张尺寸、打印机驱动缩放——很多问题只有真机打出来才暴露，比如 A4 实际宽度比预览窄 5mm，导致右侧内容被裁掉。

  实操建议：

  • 每次改完必须真机打印一次，尤其注意「更多设置」里是否关了「页眉页脚」、开了「背景图形」
  • 测试时固定纸张为 A4，禁用「适应页面」或「缩放到纸张大小」这类自动缩放选项
  • 用 @page { margin: 1cm; } 控制边距，别依赖 padding，后者在某些驱动下会被忽略
  • 留一台连着打印机的机器专用于验证，比反复点预览快得多；不同品牌打印机对 page-break 的实现差异极大，不能只信 Chrome

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