先记住这个答案
同一条媒体查询中，and 把多个条件收紧；逗号相当于提供多条独立候选，任一匹配即可。not 的作用范围是它所在的整条查询，所以 not screen and (max-width: 600px) 不能简单读成“屏幕宽度大于 600px”：非屏幕介质也可能匹配。需要给某个特性取反时，先写出完整媒体类型与边界，再在实际设备上检验结果。
and要求条件同时成立- 逗号连接备选查询
not否定所在的完整查询- 范围边界和媒体类型要核对
宽屏悬停与打印规则怎么组合
设计稿要求“宽屏并且支持悬停”的增强效果，而打印时也需要一套单独样式。可以把屏幕宽度和悬停能力用 and 连接，把打印方案写在另一条 @media print 里。逗号常用于共享同一规则的多个环境，例如窄屏或打印；这不是把两个条件同时成立。阅读复杂表达式时，先按逗号拆成各个查询，再看每一条内部的 and 和 not。
@media screen and (min-width: 900px) and (hover: hover) {
.menu { display: flex; } /* 宽屏且能悬停 */
}
@media (max-width: 600px), print {
.sidebar { display: none; } /* 任意一个查询匹配 */
}媒体查询列表类似逻辑“或”，每一项再由媒体类型和特性组成。
把上面两条规则放进一个 1000px 宽、支持鼠标悬停的屏幕环境里，.menu 会变成横排，而 .sidebar 不会隐藏；把窗口缩到 500px，第一条失效，第二条的窄屏分支生效。进入打印预览时，不论纸张宽度，第二条的 print 分支也会生效。这样逐个环境代入，比把 and 和逗号都想成“拼在一起”更容易排查。
not 否定的是整条查询
not 放在查询开头时，会否定整项查询，容易被误读为仅否定括号里的宽度。对于区间条件，直接使用 (min-width: 601px) 往往比否定小屏更易读，但两者在边界和适用媒体类型上要核对。CSS 已支持范围比较语法时也可以写成 (width > 600px)，不要凭直觉把逻辑运算符当成 JavaScript 表达式。
有两个逗号分隔的候选时，每个候选都是一条完整查询；not 不会自动跨过逗号否定另一条。比如要给打印机或宽屏分别套样式，应该先把两个条件写清，再分别在打印预览和窗口缩放下检验。更复杂的组合可用媒体查询范围语法或显式分开两条规则，避免为了省行数牺牲可读性。
容易答错的地方
- 把逗号当成同时满足
- 逗号连接的是备选查询，只要有一项匹配，规则就可生效。
- 把 not 当作只否定一个括号
not作用于所在的整条媒体查询；写复杂否定时要检查媒体类型和范围边界。
面试官还会怎么问？
能在一个查询里用括号表示复杂“或”吗？
媒体查询可以使用条件组合语法，但可读性和支持范围要考虑；常见“或”直接用逗号拆成两项最直观。
“非小屏”为什么可能不等于“大屏”？
not 否定的媒体类型、未知特性和查询整体会影响结果；直接写大屏最小宽度通常更明确。
多条查询同时命中怎么办？
媒体查询只决定规则是否参与级联；最终样式仍由来源、层、优先级和顺序决定。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。