预览看不出区别是因为浏览器默认只应用 media="screen" 样式，media="print" 仅在打印上下文（如打印预览、pdf 导出）中生效，普通浏览时被忽略属正常行为。
用 media="print" 和 media="screen" 分离样式时，为什么预览里看不出区别
因为浏览器默认只应用 media="screen" 样式，media="print" 规则不会在普通浏览中生效——它只在打印上下文（如打印预览、PDF 导出）中激活。直接打开页面看不到效果，是正常行为，不是写错了。
常见错误现象：
— 写了 <link rel="stylesheet" href="print.css" media="print">，但页面看起来完全没变
— 在 DevTools 里检查元素，发现 print 样式被标为「inactive」或灰色不可用
- 必须触发打印上下文才能激活
media="print"规则，不能靠刷新页面或切换设备模拟器 -
media="screen"是默认值，不写也生效；显式写出只是为语义清晰或配合and条件（如screen and (min-width:768px)） - 不要混用
<style media="print"></style>和@media print做重复控制——它们等效，选一种保持统一即可
Chrome / Edge / Firefox 中快速模拟打印预览的实操方法
不用反复点「Ctrl+P → 取消」，开发者工具提供实时模拟入口：
- 打开 DevTools（F12 或 Cmd+Opt+I）→ 点右上角「⋯」→ More Tools → Rendering
- 勾选
Emulate CSS media下拉框，选print - 此时整个页面会立刻重绘：字体变黑、背景色消失、
.no-print元素隐藏、分页线可能出现 - 再切回
screen，样式立即还原——这是验证打印样式是否真正隔离的最快方式
注意：window.matchMedia('print').matches 在这个模拟状态下也会返回 true，可用于 JS 逻辑联动（比如打印前禁用按钮）。
为什么写了 @media print 还是打印出导航栏和侧边栏
根本原因不是媒体查询失效，而是选择器优先级或显示逻辑没覆盖到位。CSS 在 print 上下文中依然完整解析，所有规则都参与层叠。
- 别只依赖
display: none，某些框架组件用visibility: hidden或opacity: 0隐藏，这些在打印时仍占位、可能被渲染 - 确保关键结构类有明确重置，例如：
@media print { header, aside, .ad-banner { display: none !important; } } - 避免用
position: fixed布局的打印内容——旧版 Edge 和部分 PDF 生成器会在每页顶部重复渲染 - 图片默认可能被缩放或截断，加
@media print img { max-width: 100% !important; height: auto !important; }更稳妥
media 属性值里用 and、not、, 的实际影响
这些运算符决定样式何时启用，但浏览器兼容性差异容易踩坑：
-
screen and (min-width: 768px)：现代浏览器全支持；但device-width、device-height已被多数引擎弃用，不要用 -
not print很少需要，且 Safari 对not支持不稳定，建议改用显式screen或all -
print, screen等价于all，毫无意义；真要多条件请用and组合，比如print and (color)（检测是否彩色打印机） - 移动端 Safari 对
orientation的判断有时滞后，不要依赖它做打印核心逻辑
最简健壮写法就是分开两个 <link>：一个无 media（默认 screen），一个 media="print"。复杂逻辑尽量交给 @media 块内部处理，别堆砌 media 属性值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
