@media print不是可选装饰，而是打印功能可用的前提——缺失则浏览器按屏幕样式硬打，导致导航栏、按钮、空白页上纸；写了无效主因是@import后声明、未设media="print"属性、路径错误或cors拦截，且devtools模拟不触发真实分页，须用ctrl+p验证。
@media print 不是可选的装饰，而是打印功能能用的前提——没它，浏览器基本按屏幕样式硬打，导航栏、按钮、空白页全上纸；写了但没效果，大概率是规则没被解析或被更高权重样式压垮。
为什么 @media print 规则总不生效
不是语法写错，而是加载路径、解析时机或覆盖逻辑出了问题：
-
@import语句之后写的@media print会被浏览器直接忽略（CSS 规范强制要求@import必须在最前） - 用
<style></style>写时，没加media="print"属性（即<style media="print"></style>），Chrome 就不注入该块 - 外部
print.css路径拼错，或被 CORS 拦截（尤其 CodePen / JSFiddle 等在线环境） - DevTools 里“Emulate CSS media type → print”只改渲染 viewport，不触发真实分页引擎，预览不准——必须手动按
Ctrl+P/Cmd+P进真实打印预览验证
表格跨页断裂、表头丢失怎么修
浏览器打印引擎对 <thead> 的处理和屏幕完全不同，<code>display: table-header-group 不是可选，是必须显式声明且不能简写：
- 给
<table> 加 <code>page-break-inside: avoid !important（加在<tr> 上无效） <li><code><thead> 必须写 <code>display: table-header-group !important（写成table-row-group或漏掉!important都可能失效） <tbody> 别设 <code>display: block或其他破坏表格结构的值，否则表头重复逻辑直接崩- 横向长表加
@page { size: landscape; }，同时确保外层容器max-width: none，否则 A4 纵向宽度会截断内容 - 要打印背景色：同时写
background: #fff !important+-webkit-print-color-adjust: exact+color-adjust: exact - 装饰性图片一律
display: none !important；关键图表保留，但加max-width: 100% !important+height: auto !important - 让链接显示 URL：
a[href]::after { content: " (" attr(href) ")"; font-size: 10pt; color: #666 !important; } - 字体单位必须用
pt（如font-size: 12pt），px/rem在打印引擎里尺寸飘移严重
背景色、图片、链接 URL 怎么强制显示
浏览器默认省墨策略会主动丢弃 background-color、background-image 和超链接地址——这不是 bug，是规范行为，必须显式绕过：
真正容易被忽略的是：框架（如 React Styled Components）、Shadow DOM、CSS-in-JS 默认不注入 @media print，得显式配置全局注入；而 Safari 对 @page 规则常静默丢弃，必须单独验证。别信预览界面，每次改完都得真按 Ctrl+P 看分页线和内容落点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
