浏览器只应用匹配当前输出设备的@media规则：screen用于屏幕显示（默认），print仅在打印预览或window.print()时生效，二者静态匹配、互不干扰。
media查询里screen和print到底加载哪套样式
浏览器只应用匹配当前输出设备的@media规则，screen用于屏幕显示（默认），print仅在打印预览或调用window.print()时生效——不是“同时加载两套再切换”，而是运行时静态匹配一次。
-
screen规则在网页打开时立即计算并应用，影响布局、颜色、字体大小等所有可视样式 -
print规则不会影响页面正常浏览，连DOM渲染都不参与，只在触发打印流程时由浏览器内建的打印引擎读取 - 如果没写
@media screen，未包裹的顶层CSS默认就是screen（等价于@media all） -
@media print里写的display: none对屏幕用户完全无感，别指望它隐藏广告栏来“优化首屏”
怎么让某段CSS只在打印时生效
直接写@media print块，但要注意：里面不能依赖JavaScript动态值，也不能用:hover这类交互伪类——打印是静态快照。
- 优先用
@media print { .header { display: none; } }隐藏页眉页脚，而不是靠JS加class再控制 - 避免在
@media print里用background-image，多数浏览器默认关闭背景图打印（需用户手动勾选“背景图形”） - 字体单位建议用
pt或cm，px在打印时可能缩放异常；行高用em比px更稳定 - 不要在
@media print里改body宽高，打印引擎会按纸张尺寸重排，强行设width: 100%可能被忽略
为什么写了@media print但打印还是没效果
常见原因不是语法错，而是被更高优先级的样式覆盖，或者根本没进到打印流程。
- 检查是否在
@media print外定义了同名选择器且带!important，它会压过媒体查询内的声明 - 确认是在浏览器“打印预览”界面看效果，不是用截图工具或PDF导出插件——那些不走原生打印CSS流程
- Chrome/Firefox开发者工具里可以模拟打印视图：
Ctrl+Shift+P→ 输入“Rendering” → 勾选Emulate CSS media type: print - 如果用了CSS-in-JS库（如Emotion、Styled Components），确认它支持
@media print提取，有些SSR场景下会漏掉
能否用JavaScript动态切换screen/print样式
不能。媒体查询匹配发生在CSS解析阶段，JS无法“切换”当前媒体类型，window.matchMedia只能监听变化，但print没有“进入/退出”事件。
立即学习“前端免费学习笔记（深入）”；
-
window.matchMedia('print').matches永远返回false，除非正在打印预览窗口中执行 - 想根据场景改样式，得用JS手动增删class，比如
document.body.classList.add('print-mode')，再配.print-mode .header { display: none; } - 这种JS方案要小心：打印预览弹出时，页面JS已暂停执行，所以必须在调用
window.print()前就准备好class - 真正可靠的条件样式，还是得回到
@media本身——它不依赖JS生命周期，也不怕打印引擎冻结脚本
color，也要把它放进@media print块里，否则打印时根本不会读。 
