用@media print写打印样式需在主css中直接添加，仅覆盖影响打印的属性：隐藏非内容元素、重置颜色背景、用pt/cm单位、确保链接可读；避免复制整套css、误用visibility:hidden、选择器过宽或权重冲突；chrome/firefox预览失效常因未启用“背景图形”或未走原生打印流程；无需单独print.css，内联最稳，注意分页控制用break-inside: avoid作用于tr。
怎么用 @media print 写打印样式
直接加 @media print 块就行，它会在用户点“打印”或按 Ctrl+P 时自动生效，浏览器会忽略其他 media 类型的样式。关键不是“能不能加”，而是加在哪、加什么内容。
常见错误是把整套 CSS 都复制一份塞进 @media print，结果体积翻倍还容易冲突。实际只需覆盖那些影响打印效果的属性：
- 隐藏非内容元素：
header、nav、.ad-banner这类在纸上毫无意义 - 重置颜色和背景：
color改成#000，background强制设为none（否则很多打印机默认不打背景色） - 调整尺寸单位：优先用
pt或cm，避免rem或视口单位导致缩放异常 - 确保链接可读：给
a:link加text-decoration: underline，并用attr(href)在括号里显示网址（部分浏览器支持）
为什么打印时图片/按钮/侧边栏还在页面上
因为没显式隐藏。浏览器不会自动判断“这个 div 不该印出来”，它只认 CSS 规则。你写的 display: none 必须明确作用于对应选择器，且不能被更高级别的权重覆盖。
典型坑点：
- 用了
visibility: hidden—— 它保留占位空间，打印时仍会撑开空白行 - 选择器太宽泛，比如
.container *想一锅端，结果误杀了正文里的img - 样式表加载顺序不对：
@media print写在主样式后面，但又被某个第三方库的!important覆盖了 - 某些框架（如 Bootstrap）自带 print 样式，但默认只处理基础组件，
.sidebar这种自定义类得自己补
Chrome/Firefox 打印预览不生效的几个原因
不是代码写错了，而是环境或触发方式有问题。打印样式只在真实打印流程中激活，DevTools 的“仿真”功能有限。
排查重点：
- 确认你在用浏览器原生打印（Ctrl+P / Cmd+P），而不是 PDF 导出插件或“另存为 PDF”按钮——后者可能绕过 media 查询
- 检查是否启用了“背景图形”选项：Chrome 设置里要勾选
Background graphics，否则background-color和background-image全部失效 - Firefox 对
@page支持更严格，如果用了@page { margin: 1cm; }却没生效，可能是父级块设置了overflow: hidden把页边距截断了 - 使用
window.matchMedia('print').matches可以在控制台手动验证当前是否进入打印模式，比猜靠谱
要不要单独建一个 print.css 文件
没必要。内联写在主样式表里最稳，避免多一次 HTTP 请求，也省去维护两份文件的麻烦。
但如果项目已用构建工具（如 Webpack/Vite），可以考虑抽离，前提是：
- 确保构建后仍能被正确注入
<link rel="stylesheet" media="print"> - 注意加载时机：放在
最底部，防止阻塞首屏渲染 - 别用
@import引入 print 样式——它在所有浏览器里都会被忽略
真正容易被忽略的是分页控制：page-break-inside: avoid 对表格行无效，得用 break-inside: avoid（现代写法），而且必须加在 tr 上，不是 table。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
