media属性仅对和
✅ 正确（但注意：内部
@media...
❌ 无任何效果
media值支持逻辑运算符，但要注意优先级和兼容性
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"
的样式表，大概率在打印预览里不生效。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
真正可靠的方案是提前写死在
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下），只是不解析其中规则。这点在调试网络面板时容易误判。