先记住这个答案
媒体类型如 screen、print 描述设备类别，是概括性的；媒体特性如 width、orientation 描述具体特征，必须用括号包围。组合时用 and 连接多个条件，如 @media screen and (min-width: 600px)，表示仅在屏幕且宽度至少600px时应用。逗号或 or 表示或关系。媒体类型省略时默认 all，因此 @media (min-width: 600px) 对所有媒体类型生效。
- 媒体类型表示设备大类，如 screen 或 print
- 媒体特性描述具体条件，如宽度和方向
- 用 and 组合，逗号表示或逻辑
类型与特性的作用机制
媒体类型（media type）将环境粗分为 'screen'（屏幕）、'print'（打印预览）、'all'（所有）。它回答 '用什么设备看'。媒体特性（media feature）则提供精细条件，如 width 是视口宽度，orientation 是横竖屏，hover 是否支持悬停。特性值必须用括号括起，且可带范围如 (min-width: 600px)。
组合时，and 要求所有条件为真。例如 @media screen and (max-width: 800px) 同时满足屏幕和宽度不超过800px才生效。逗号分隔表示 '或'，如 @media screen, print 对屏幕或打印都生效。not 可整体取反，但在旧规范中不能用于否定单个特性。省略类型时，默认为 all，因此 @media (width > 600px) 对任何媒体类型都匹配（如果特性支持）。
设计打印样式并限制屏幕
场景：为文档创建样式，屏幕阅读时正文使用大屏布局，打印时去除导航、调整字号。条件是：屏幕宽度至少1024px时显示侧边栏；打印时隐藏菜单并设置黑色文本。
写法：基础样式针对所有设备，然后 @media screen and (min-width: 1024px) { .sidebar { display: block; } }。同时用 @media print { .nav { display: none; } body { font-size: 12pt; } }。注意，打印设备也有视口宽度，但打印样式通常只响应页面尺寸，因此常省去特性，直接 @media print。
容易被忽略的边界条件
一个常见失效点是，当只写特性而不写类型时，它应用于所有类型，可能意外影响打印。例如 @media (max-width: 600px) 在打印预览中也可能匹配，因为打印视口宽度可能不足600px。如果只想作用于屏幕，必须写明 screen。
处理方式是明确列出期望的类型，或使用 only 操作符。only 用于向后兼容：老浏览器不支持媒体特性时，only screen and (min-width: 600px) 中的 only 让老式浏览器忽略整个规则，避免误判。代价是必须写类型，否则无效。
容易答错的地方
- 把媒体特性当类型单独使用
- 有人写
@media width: 600px，误以为特性可独立于括号。实际特性必须用括号包围，正确是@media (width: 600px)。不加括号会被解析为无效，规则不生效。 - 认为媒体类型只有 screen 和 print
- 除屏幕和打印外，还有
all，以及过去曾有tv、projection等，但已被弃用。现代 Web 开发主要用screen、print和all，用screen时应明确排除打印环境。
面试官还会怎么问？
媒体类型可以省略吗？省略时默认什么？
可以，省略时默认是 all，即匹配所有类型。所以 @media (min-width: 600px) 对屏幕和打印都有效。如果需要限制到屏幕，必须显式写 screen。
逗号和 or 在媒体查询中完全等价吗？
在媒体查询列表里，逗号分隔多个查询，任一个匹配整体即匹配，这与 or 逻辑等价。但 or 是 Media Queries Level 4 新增，旧浏览器可能不支持，逗号兼容性更好。not 只能应用于它所在的媒体查询（即否定那个查询），不会影响逗号列表中的其他查询。
如何表达“非小屏”条件？
通常应明确写出类型：@media screen and (min-width: 601px)。若要使用 not，应否定整个媒体查询，如 @media not all and (max-width: 600px)，但会匹配所有类型（包括打印），不推荐。更推荐使用范围语法（现代浏览器）：@media screen and (width > 600px)。注意 not 在旧规范中不能否定单个特性，只能否定整个查询。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。