media="print" 是唯一可靠的方式，即通过提前声明 media="print" 的样式块或 @media print 规则，使浏览器在打印时自动匹配生效，而非动态修改 media 属性。
media="print" 是唯一可靠的方式
HTML 的 <style></style> 元素中，media 属性不是用来“切换”打印样式，而是声明该样式块**仅在匹配媒体类型时生效**。浏览器不会动态响应 media 变化来重绘，它只在初始渲染或媒体查询变化（如窗口缩放）时评估——而打印触发的是独立的渲染上下文，不依赖 JS 控制 media 属性值。
为什么直接改 style.media = "print" 没用
常见误区是试图用 JS 动态修改 <style media="screen"></style> 的 media 属性来“切换”到打印样式：
document.querySelector('style').media = 'print';
这不会触发浏览器重新应用样式，也不会影响即将执行的 window.print()。因为：
- 打印预览/输出使用的是当前 DOM + 所有已匹配的
media样式规则，而非运行时属性值 -
media属性只在元素插入或解析时被读取一次，后续修改无副作用 - 打印引擎不监听 DOM 属性变更
真正有效的打印样式控制方式
必须让打印样式在页面加载时就存在，并通过媒体查询或独立样式块声明。推荐两种实操方案：
- 用
@media print写在常规<style></style>里：<style><br> body { font-size: 16px; }<br> @media print {<br> body { font-size: 12pt; }<br> .no-print { display: none; }<br> }<br></style> - 用独立
<style media="print"></style>块（语义更清晰，且可配合disabled控制）：<style media="print"><br> .header, .sidebar { display: none; }<br> a[href]:after { content: " (" attr(href) ")"; }<br></style> - 如果需 JS 触发前临时启用/禁用某组打印样式，改
disabled属性：const printStyle = document.querySelector('style[media="print"]');<br>printStyle.disabled = false; // 启用<br>window.print();
容易忽略的兼容性和细节
Chrome 和 Firefox 对 media="print" 的支持稳定，但注意：
- IE11 及更早版本不支持
disabled切换<style></style>，需用innerHTML替换内容或 class 控制 -
@media print中不能使用vh/vw，应优先用pt、in、cm等绝对单位 - 打印时背景色默认被禁用（即使写了
background: #fff），需在浏览器打印设置中勾选“背景图形”才可见 - 不要依赖
window.matchMedia('print').matches判断是否在打印中——它永远返回false，打印是异步快照，不是实时媒体状态
打印样式不是靠切换属性生效的，是靠提前声明和浏览器自动匹配。关键在写对位置、用对单位、避开被忽略的渲染限制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
