@media print没变化是因为浏览器不自动降级屏幕样式，选择器权重不足时会被body .header等更高权重规则覆盖；需用更具体选择器、静态引入media="print"样式表，并重置float、position等布局属性。
为什么写了 @media print 却没变化
浏览器不会自动降级屏幕样式——哪怕你把 @media print 写在 CSS 文件末尾，只要选择器权重不如屏幕样式（比如 .header 被 body .header 或带 !important 的框架规则覆盖），打印时就照旧渲染。
检查 Chrome DevTools → Rendering → Emulate CSS media type → 选 print，看样式是否加载；但注意：分页线不准，仅用于查样式是否生效。
- 别依赖
!important治标；优先用更具体的选择器，比如把.nav改成body .nav或.main-content + .nav - 确认
<link rel="stylesheet" media="print">是静态引入在中，而非 JS 动态插入——异步加载的 print 样式大概率被跳过 - 避免多个
<link>分散加载，部分规则根本没进渲染树
哪些元素必须手动隐藏，且不能只靠 display: none
导航栏、侧边栏、广告、按钮这些交互控件不参与纸面输出，但浏览器绝不会自动过滤。更麻烦的是：仅设 display: none 可能引发父容器塌陷、flex 换行异常或浮动残留，导致正文错位甚至整页空白。
- 必须同步重置布局属性：
float: none !important、position: static !important、overflow: visible !important - 慎用
visibility: hidden——它保留盒模型空间，打印时照样占行、撑出空白页 - 动态内容（如
.loading、.modal、.toast）也要一并加入隐藏列表，JS 插入的节点不会被默认规则捕获 - Bootstrap 用户注意：
.d-md-none在 print 下无效，得单独写@media print { .d-md-none { display: block !important; } }
@page 和字体单位怎么设才不糊、不分页错乱
屏幕用的 rem、%、Web Font 在打印时极易失真：字号缩放不可控，中文字体变方块，背景色被浏览器默认屏蔽，表格跨页断裂。
- 正文字号强制用
pt（如font-size: 12pt），这是印刷标准单位，A4 纸上最稳 - 字体栈降级为系统安全字体：
font-family: "Microsoft YaHei", SimSun, sans-serif；禁用@font-face打印时加载 -
<pre class="brush:php;toolbar:false;"></pre>和<code>块必须指定等宽字体：font-family: "Courier New", monospace - 表格必须显式设置
thead { display: table-header-group; }和tfoot { display: table-footer-group; }，否则页眉页脚不随分页重复 - 关键容器加
break-inside: avoid（如table、.card、h2 + p），防内容被硬切
调试时最容易忽略的三个真实陷阱
打印预览看着正常，真机输出全是空白页、错位表格和糊掉的字体——这不是浏览器问题，是你没把打印当成独立渲染通道来对待。
-
<iframe></iframe>不会继承父页的@media print，需提前提取内容或单独重置其样式 - 用
* { margin: 0; }这类宽泛重置，容易误杀<table> 或 <code><pre class="brush:php;toolbar:false;"></pre>的关键结构 - 边框叠加问题：未设
border-collapse: collapse的表格，在打印时双线错位，肉眼难察觉但实际糊成一片
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
