@media print没反应是因为浏览器未将其纳入打印渲染树，主因是未用media="print"引入、被屏幕样式覆盖、框架重置或选择器权重不足；应分离为独立print.css、用pt/mm单位、显式隐藏非内容元素并调试computed面板验证。
为什么写了 @media print 却没反应
不是语法写错了，而是浏览器根本没让它生效——@media print 不提升选择器权重，也不绕过 CSS 层叠规则。哪怕你把它写在 CSS 文件末尾，只要屏幕样式的选择器更具体（比如 .header vs body .header），打印样式照样被覆盖。
- 检查 HTML 中是否用了
media="screen"引入了该 CSS 文件——带media="screen"的样式表压根不会进打印渲染树 - 打开 Chrome 打印预览 → DevTools → Computed 面板 → 左上角切换为 “print” 媒体，看目标元素最终计算值是否被覆盖
- 框架如 Bootstrap 自带
@media print重置，可能悄悄覆盖你的font-size或margin - 别在同一个 CSS 文件里混写
@media screen和@media print，旧版 Safari 会解析错
怎么写才真正生效：分离 + 显式 + 物理单位
最稳的路径是新建独立文件 print.css，只放打印专用规则，不混任何通用样式或 @media screen。
- HTML 中用：
<link rel="stylesheet" href="print.css" media="print">—— 注意大小写和空格，media="PRINT"或media=" print"都无效 - 字号统一用
pt或mm，禁用rem、%、em；中文字体栈强制用系统安全字体：font-family: "Microsoft YaHei", SimSun, sans-serif; - 要打印背景色或图片，必须三重声明：
color-adjust: exact;、-webkit-print-color-adjust: exact;、print-color-adjust: exact; - 避免
* { margin: 0; }这类通配符，会破坏<table> 的默认 display 行为<h3>哪些元素必须显式隐藏，且 display: none 才真消失</h3> <p>导航栏、广告位、按钮、加载提示这些不会自动“知道”自己不该上纸——不声明，它们就照常渲染，轻则挤占正文，重则生成空白页。</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a> <p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li>统一加 class 如 <code>no-print，然后写：@media print { .no-print { display: none !important; } } - 别用
visibility: hidden—— 它保留盒模型空间，可能让段落错位、分页线偏移 - JS 动态插入的内容（如
.loading、.modal）也要一并加入隐藏列表 -
iframe不继承父页的@media print，得单独处理其内容或提前提取
分页、链接、表格这三处最容易崩
表格劈成两半、标题孤行、链接变成“点击这里”——这些问题不是偶然，而是没干预打印流的自然断点。
- 给
<table>、<code><img>、.section加page-break-inside: avoid，不然跨页断裂是常态 - 链接必须显式暴露 URL：
a[href]:after { content: " (" attr(href) ")"; color: #666; font-size: 9pt; }，否则打印出来全是无效文本 - 确保
<thead> 和 <code><tfoot> 存在，部分打印引擎依赖它们做跨页重复表头<li> <code>@page规则支持极不稳定，Chrome/Firefox 在用户选了“最小边距”后直接忽略它；别当主力用，仅作辅助
真正难的不是写对规则，而是验证——Chrome 的分页逻辑和 Firefox 完全不一致，而用户最终用的是他电脑上装的那个版本。调试时别只信一个浏览器的打印预览。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
