@media print 失效主因是加载顺序、选择器优先级及浏览器默认禁用；须检查媒体类型模拟、确保样式表未被 screen 限定、避免压缩误删，并用 !important 强制覆盖模板内联样式。
直接加 @media print 就能生效，但多数模板里它根本不起作用——问题不在写法，而在加载顺序、选择器优先级和浏览器默认禁用项。
为什么 @media print 在模板里经常失效
HTML 模板（尤其是 CMS 或框架生成的）通常自带大量内联样式、!important 覆盖、多层嵌套类名，或通过 media="screen" 显式排除了打印样式表。结果就是你写了规则，DevTools 里也看到它被加载了，但在打印预览中完全不应用。
- 检查最终计算样式时，切换到「Print」媒体类型（Chrome DevTools → ⚙️ → Rendering → Emulate CSS media → print），看你的规则是否被更高优先级样式覆盖
- 如果模板用了
<link rel="stylesheet" media="screen">加载主样式，那它压根不会参与打印渲染 - 某些构建工具（如 Webpack + MiniCssExtractPlugin）会把所有 CSS 合并进一个文件，若没显式保留
@media print块，压缩后可能被误删 - WordPress 主题常在
<style></style>标签里用wp_add_inline_style()注入样式，但该函数默认不识别媒体查询，需手动包裹
@media print 必须写的几条硬规则
不是“建议”，是不写就大概率内容错乱或丢失。尤其对表格、链接、图片这类高频元素：
-
table { page-break-inside: avoid !important; }—— 否则表格行可能在中间断开，第二页只剩半行 -
a[href]:not([href^="javascript:"]):not([href^="#"])::after { content: " (" attr(href) ")"; font-size: 9pt; color: #666; }—— 纯文字链接纸上毫无意义，必须补 URL -
img { max-width: 100% !important; height: auto !important; }—— 避免高 DPI 屏幕下导出 PDF 时图片拉伸变形 -
* { float: none !important; position: static !important; }—— Flex/Grid 在旧打印驱动中支持极差，强制回退到文档流
模板中隐藏非内容区域的实操方式
别依赖框架自带的 .d-none 或 .hidden 类——它们通常没为打印媒体做适配。统一用语义化 class + 显式覆盖：
- 给所有不该打印的区块加
class="no-print"（导航、广告位、编辑按钮、评论框等） - 在
@media print中写：.no-print { display: none !important; }，!important不可省，模板里太多内联样式会赢过普通选择器 - 表单控件要额外处理：
input, select, textarea, button { background: transparent !important; border: 1px solid #000 !important; }，否则圆角+背景色会留白框或消失 - 避免用
visibility: hidden替代display: none，它仍占布局空间，影响分页位置
测试时最容易忽略的三个点
真机打印成本高、反馈慢，但只靠「打印预览」也不可靠：
- Chrome 的「另存为 PDF」比 Ctrl+P 预览更接近真实打印机行为，特别是对
@page和attr()的支持 - Firefox 对
@page { margin: 1cm; }支持更完整，Chrome 只认body { margin: 0.5cm; }，得双写兜底 - 移动端 Safari 几乎无视
window.print()，如果模板要支持手机用户，得准备降级方案（比如点击后生成 PDF 下载）
最麻烦的其实是字体：模板里写的「微软雅黑」在 Windows 打印机上可能 fallback 到宋体，而 macOS 上「PingFang SC」在 PDF 里若未嵌入，就会变 Times New Roman。别指望 @font-face 在打印中稳定工作，衬线字体用 font-family: "Times New Roman", serif; 最保险。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
