<style media="print">可行但需显式覆盖屏幕样式、提升选择器权重、启用color-adjust: exact、禁用背景图形并隐藏非内容元素，否则因优先级不足或浏览器默认限制而失效。
直接用 <style media="print"> 是可行的，但必须配合具体规则、优先级和浏览器行为才能真正生效——很多人写了却没效果，问题不在语法，而在执行链路被悄悄绕过了。
为什么 <style media="print"> 写了也不起作用
浏览器确实会忽略 <style media="print"> 里的所有规则，直到用户触发打印（window.print() 或 Ctrl+P），但这不等于“写了就自动工作”：
- 如果页面已有更高优先级的样式（比如
body { color: blue !important; }在普通 CSS 里），@media print里的color: #000会被覆盖——media="print"不提升选择器权重 - 外部样式表若用了
media="screen"，它根本不会参与打印样式计算；而<style media="print">和<link rel="stylesheet" media="print">是并列加载，无先后顺序，但冲突时仍按 CSS 层叠规则处理 - Chrome / Edge 默认关闭“背景图形”，所以
background-color和border即使写了也不会印出来，除非加-webkit-print-color-adjust: exact - 某些 UI 框架（如 Bootstrap 5）自带
@media print重置块，会清掉你的自定义字体、边距等，得在 DevTools 的 Computed 面板切换到print媒体下查最终值
<style media="print"> 里该写什么才管用
不能只靠 display: none 隐藏导航栏，得覆盖所有可能干扰打印的默认行为：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 强制重置基础样式：
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } - 正文区域必须显式声明尺寸与排版：
.content { width: 210mm; max-width: 100%; font-size: 12pt; line-height: 1.4; }（A4 宽度是 210mm，不是像素） - 链接要降级为纯文本：
a:link, a:visited { color: #000 !important; text-decoration: none; }，必要时加a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #666; } - 图片必须约束宽度：
img { max-width: 100% !important; height: auto !important; }，否则高 DPI 图片会撑破纸张 - 关键颜色必须强制启用：
body { -webkit-print-color-adjust: exact; color-adjust: exact; }
和 @media print 块混用时的优先级陷阱
<style media="print"> 本质只是把 @media print 块包裹进一个带媒体属性的 <style> 标签，它和你在主 CSS 文件里写的 @media print 没有本质区别——但容易踩坑：
立即学习“前端免费学习笔记（深入）”；
- 如果主 CSS 文件里有
@media print { .header { display: block; } }，而你在<style media="print">里写.header { display: none; }，后者不一定赢——得看选择器特异性（例如.header.no-print>.header） -
!important在media="print"里依然有效，但滥用会导致调试困难；更稳妥的是提高选择器精度，比如用body.print-ready .header - 不要在同一个 HTML 里既用
<style media="print">又引入<link rel="stylesheet" href="print.css" media="print">同类规则，容易互相覆盖且难以定位来源 - 构建工具（如 Vite、Webpack）可能把
<style media="print">内联进 HTML，但若开启 CSS 提取或压缩，@media print块可能被误删或合并，需检查最终生成的 HTML 源码
测试时最容易被忽略的三个真实限制
打印预览（Ctrl+P）看起来正常，不代表真机输出可靠：
- A4 实际可用宽度约 595px（96dpi 下），但打印机驱动常额外加页眉页脚（各 1cm），所以
@page { margin: 15mm; }必须配body { width: 100%; }，否则右侧内容会被裁 - 思源黑体、Inter 等 Web 字体若未嵌入 PDF 或未安装在打印机系统中，会回退成宋体或 Times New Roman，影响排版节奏
-
position: fixed元素（如悬浮按钮）在多数打印机驱动中会被截断或完全丢弃，必须改用position: static+margin-top模拟
