@media print 未生效的根本原因是未进入打印渲染树，需确保link media值小写无空格、避免@import、禁用flex/grid、thead设table-header-group、@page与@media平级且单位用pt/mm。
为什么写了 @media print 却没反应
不是语法错了，是浏览器压根没让它进打印渲染树——@media print 不是“写了就生效”，它必须被正确加载、未被覆盖、且不被其他规则干扰。
- 检查
<link rel="stylesheet" href="print.css" media="print">的media值是否小写、无空格（"print"有效，"PRINT"或" print"无效） - 别把
@media print塞在主 CSS 文件末尾：前面的.container { width: 1200px; }可能用更高权重覆盖你的table { width: 100% !important; } - 禁用
@import引入打印样式：Safari 和旧 Edge 会跳过，外部 CSS 必须用<link>直接加载 - 在线工具（如 CodePen）里写的
@media print常失效——因为页面运行在 iframe 中，父页样式不会穿透；必须内联到 iframe 的<style></style>里或本地调试
@page 和 @media print 到底谁管什么
@page 控纸张物理属性，@media print 控内容渲染样式，二者必须平级存在，不能嵌套。
-
@page { size: A4; margin: 15mm; }才真正设置纸张尺寸和边距；写在@media print里面会被整个忽略 -
@page :first { margin-top: 25mm; }可单独加首页页眉空间，但 IE11 只认size和margin -
@media print { body { margin: 10mm; } }只影响内容区域留白，不是纸张本身，对裁切、留白过大等问题无效 - 横向打印用
@page { size: landscape; }，但需配合容器max-width: none，否则 A4 纵向宽度会截断长表格
表格跨页断裂，光加 page-break-inside: avoid 为啥没用
因为浏览器默认不重复 <thead>，也不保证单行完整，只靠一个属性根本拦不住断裂。<ul>
<li>必须同时写：<code>thead { display: table-header-group; } + tfoot { display: table-footer-group; }
tr { page-break-inside: avoid !important; } 要搭配 display: table-row !important; 才稳定，尤其在框架重置了 display 的场景下<table> 加 <code>display: block; width: 100% !important;table { border-collapse: collapse; } 防止双线叠加错位，width: 100% !important; 避免被 max-width 或固定 px 值压缩怎么精准提取可打印内容，而不是靠 class="no-print"
用 class="no-print" 容易和 Ant Design、Bootstrap 等框架冲突，导致误删弹窗或按钮；data-print="true" 是显式声明，JS 提取稳，CSS 干净。
- 标记方式：
<main data-print="true"></main>，不是<main class="print-content"></main> - CSS 写法：
@media print { * { display: none; } [data-print="true"] { display: block; } } - JS 提取：
document.querySelector('[data-print="true"]')，避免模糊匹配[data-print]（广告脚本可能也加了该属性） - 如果页面含
<iframe></iframe>，父页的@media print不会穿透，需单独为 iframe 内容写样式或提前提取 DOM
实际落地时最容易被忽略的是：@page 必须和 @media print 平级、thead 必须显式设为 table-header-group、以及所有单位必须用 pt 或 mm —— 这三处一漏，预览看着正常，真打出来就错位、劈开、缩成一团。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
