@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才说明已进入打印模式 - 确保样式表是静态引入的：
<link rel="stylesheet" href="print.css" media="print">，别用 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; } }
表格、分页和字体在打印中崩得最狠，怎么稳住
表格跨页断裂、标题和正文被硬切、小字号糊成一片——这些问题不是“看起来不好”，是打印机驱动直接丢弃或二次缩放导致的物理输出失败。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 表格必须加
page-break-inside: avoid !important到<table> 元素上，<code><tr> 上加无效<li><code><thead> 用 <code>display: table-header-group !important，但 Safari 可能不认，稳妥做法是复制表头到每页开头 - 正文字号至少
12pt（不是12px），避免用rem或%，高 DPI 打印机对缩放不可控 - 防截断：给长段落或列表加
break-inside: avoid，关键节点前插<div style="page-break-before: always"></div> - 背景色要打印出来？必须同时写：
background: #fff !important; -webkit-print-color-adjust: exact; color-adjust: exact; - 每次改完必须真机打印一次，尤其注意「更多设置」里是否关了「页眉页脚」、开了「背景图形」
- 测试时固定纸张为 A4，禁用「适应页面」或「缩放到纸张大小」这类自动缩放选项
- 用
@page { margin: 1cm; }控制边距，别依赖padding，后者在某些驱动下会被忽略 - 留一台连着打印机的机器专用于验证，比反复点预览快得多；不同品牌打印机对
page-break的实现差异极大，不能只信 Chrome
Chrome 打印预览和真机输出差距大，怎么验证才靠谱
开发者工具里的 print 模拟只管样式是否加载，不管分页线、纸张尺寸、打印机驱动缩放——很多问题只有真机打出来才暴露，比如 A4 实际宽度比预览窄 5mm，导致右侧内容被裁掉。
实操建议：
立即学习“前端免费学习笔记（深入）”；
