link标签的media属性必须设为print，浏览器才在打印时加载该样式表；正确写法为，且需单独维护print.css文件并用真实打印预览测试。
link标签的media属性必须设为print
浏览器只在打印预览或实际打印时，才会加载media="print"的样式表。如果写成media="screen"或漏掉media属性，黑白样式根本不会生效。
正确写法示例：
<link rel="stylesheet" href="print.css" media="print">
注意：rel="stylesheet"不能省略，否则浏览器不识别为样式资源；href路径需确保可访问，建议用相对路径或根路径（如/css/print.css）。
print.css里要重置颜色、移除背景和图片
打印样式不是简单把页面变灰——它需要主动覆盖原有样式，否则彩色背景、阴影、图标等仍可能被输出（尤其在Windows Edge/Chrome默认设置下）。
关键操作包括：
- 将所有文字颜色强制设为
#000或black，避免灰色文字在廉价打印机上模糊 - 用
background: none !important;清除所有背景色和背景图（!important防止被原样式覆盖） - 隐藏非必要元素：
.ad-banner, .nav, .sidebar { display: none !important; } - 对图片统一处理：
img { display: none !important; }或仅保留关键图：img[alt~="logo"] { display: inline; }
避免用CSS @media print嵌套在主样式里
虽然@media print { ... }语法合法，但实践中容易被主样式权重压制，且调试困难——浏览器开发者工具的“打印”模拟模式常不触发内联@media块。
更可靠的做法是：
- 单独维护
print.css文件，专注黑白逻辑 - 不在其中写
@media screen或其它媒体查询 - 若需响应式打印（如A4横向），用
@page { size: A4 landscape; }，而非@media
特别注意：@page规则只能出现在print.css顶层，不能套在@media print里。
测试时别只看“另存为PDF”，要进真实打印预览
Chrome/Firefox的“另存为PDF”功能会跳过部分打印样式逻辑（比如@page边距、分页控制），导致样式看似正常，实则打印时错乱。
必须手动触发：
- Windows：Ctrl+P → 选择“Microsoft Print to PDF”或真实打印机
- macOS：Cmd+P → 点击“PDF”按钮 → “打开PDF在预览中”
- 检查是否出现意外留白、内容截断、颜色未变黑等问题
最容易被忽略的是分页：表格跨页断裂、标题孤行在页尾、代码块被截断——这些只有真进打印预览才能暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
