style标签的media属性只控制css是否生效，不控制设备本身或资源加载；它告诉浏览器该段样式仅在匹配媒介条件时应用，实际渲染还受浏览器支持、用户设置及层叠优先级影响。
style 标签的 media 属性到底控制谁？
media 属性不控制“设备本身”，它只告诉浏览器：“这段 CSS 仅在匹配该媒介条件时生效”。实际是否渲染，取决于浏览器是否支持该媒介类型、用户是否启用对应输出（比如打印背景色）、以及样式是否被更高优先级规则覆盖。
常见误解是以为加了 media="print" 就能自动让打印机输出背景色——其实不行。浏览器默认禁用打印背景色，必须用户手动开启（IE/Edge 在“页面设置”里勾选“打印背景颜色和图像”，Chrome/Firefox 则需通过 @media print 显式声明 -webkit-print-color-adjust: exact 或 print-color-adjust: exact）。
怎么写 media 值才能精准命中目标设备？
直接写 media="screen" 或 media="print" 最稳妥；需要更细粒度控制时，必须用 and 连接多个条件，不能省略空格。
-
media="screen and (min-width: 768px)"✅ 正确（注意and前后都有空格） -
media="screen and(min-width: 768px)"❌ 多数浏览器忽略整条规则 -
media="handheld"⚠️ 已基本失效——现代手机浏览器不识别该值，应改用screen and (max-width: 480px)或响应式断点 -
media="all and (orientation: landscape)"✅ 可同时作用于屏幕和打印预览（如果设备支持方向检测）
不要依赖 device-width：它反映物理像素，受 DPR 影响大，且 Safari 对其支持不稳定；优先用 width（视口宽度）。
多个 <style></style> 块共存时，层叠顺序怎么算？
HTML 中多个 <style></style> 标签按文档流顺序解析，后出现的规则优先级更高——但前提是它们的 media 条件都满足。
例如：
<style media="screen">.btn { color: red; }</style><style media="screen and (min-width: 768px)">.btn { color: blue; }</style><style media="print">.btn { color: black; }</style>
在桌面浏览器中，.btn 是蓝色；在打印预览里是黑色；在小屏手机上是红色。但如果把第二条写成 media="(min-width: 768px)"（漏掉 screen），它会在打印预览里也生效，可能意外覆盖 print 样式。
关键点：永远显式写明基础媒介类型（screen、print），避免裸 @media (min-width:...) 被多端触发。
为什么打印时背景色/图片经常不显示？
这不是 media 属性没起作用，而是浏览器策略限制。即使你写了：
<style media="print">
body { background: #eee; }
.chart { background-image: url(data:image/png,...); }
</style>
Chrome 默认仍会丢弃背景——必须补上这两行：
body, .chart {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
否则无论 media="print" 写得多准，CSS 都不会生效。Firefox 和 Edge 新版本也要求此声明；Safari 对 print-color-adjust 支持有限，建议测试真实打印输出而非仅预览。
真正难处理的不是语法，而是不同浏览器对同一 media 值的实际执行差异——比如 tv 几乎无实测支持，projection 在 Chrome 中已废弃。务实做法是：用 screen + 视口断点覆盖移动/桌面，用 print + print-color-adjust 控制输出，其余媒介类型除非有明确硬件对接需求，否则跳过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
