media属性仅对和标签有效，用于指定样式表适用的媒介类型；在等其他标签上使用会被浏览器忽略。
media属性只在link和style标签里有效
很多人误以为media能用在任意HTML标签上，其实它只被<link>和<style></style>标签原生支持。用在<div>或<code><span></span>上完全无效，浏览器会直接忽略。
常见错误现象：写了<div media="print">...，发现打印时样式没变——不是逻辑错了，是语法不被识别。
<ul>
<li>
<code><link rel="stylesheet" href="print.css" media="print"> ✅ 正确
<style media="screen">body{...}</style> ✅ 正确（但注意：内部@media规则比这个更常用）<div media="handheld">... ❌ 无任何效果
<h3>media值支持逻辑运算符，但要注意优先级和兼容性</h3>
<p><code>and、not、,（逗号）这三种运算符确实可用，但它们的组合行为容易出错。比如not screen and (max-width: 768px)实际等价于(not screen) and (max-width: 768px)，而not screen永远为假——因为当前环境必然是某种media类型，不可能“不是screen”又同时满足宽度条件。
更安全的写法是把否定放在整个条件外：screen and (max-width: 768px), not print这种写法意义模糊，应避免。
立即学习“前端免费学习笔记（深入）”；
- 推荐组合方式：
screen and (min-width: 1024px)、print、screen and (prefers-color-scheme: dark) -
not只建议用于简单否定，如not all基本无用，not print也极少需要 - 逗号表示“或”，但浏览器仍会下载所有匹配的CSS文件，哪怕只用其中一份——这点常被忽略，影响首屏性能
print样式表必须显式声明，且不能依赖JavaScript触发
用户点“打印”时，浏览器不会执行JS，也不会重新计算media值。所以靠document.createElement('link')动态插入media="print"的样式表，大概率在打印预览里不生效。
真正可靠的方案是提前写死在里：
<link rel="stylesheet" href="print.css" media="print">
还要注意：打印样式表里用display: none隐藏导航栏、广告位是常规操作，但visibility: hidden不行——它仍占页面流，可能导致内容被截断。
- 打印专用样式必须用
media="print"，不能靠@media print内部规则“覆盖”屏幕样式——因为浏览器可能已把屏幕CSS加载并解析完毕，覆盖不彻底 - 如果用了CSS-in-JS或构建工具自动拆包，要确认
print.css没有被tree-shaking掉 - 测试时别只看“另存为PDF”，务必打开浏览器原生打印预览（Ctrl+P），那里才反映真实行为
移动端适配慎用handheld，优先用screen and (max-width: ...)
handheld这个值在现代浏览器中基本被弃用。Chrome、Firefox、Safari都无视它，只有极老的Opera或黑莓浏览器曾支持。把它当“手机专用”用，等于白写。
真正起作用的是媒体特性查询，比如宽度、像素密度、交互方式：
- ✅
screen and (max-width: 480px)—— 覆盖小屏手机 - ✅
screen and (hover: hover)—— 区分触屏/鼠标设备 - ✅
screen and (-webkit-min-device-pixel-ratio: 2)—— 高分屏优化 - ❌
handheld—— 不推荐，无实际效果
另外，media属性控制的是“是否加载该CSS文件”，不是“是否应用”。即使media不匹配，文件也可能被浏览器预加载（尤其在HTTP/2下），只是不解析其中规则。这点在调试网络面板时容易误判。
