组合多个媒体查询
使用 and、or 和 not 运算符，将媒体特性组合成复杂查询。
组合多个媒体查询 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。
and 运算符
and 关键字要求所有条件同时为真。它适用于同时针对特定设备尺寸和设备类型。
<div class="box">and operator demo</div>
使用 and 组合范围
将 min-width 和 max-width 与 and 结合使用，可定位特定的视口宽度范围（仅适用于平板电脑的样式）：
<div class="layout">
<div class="col">Col A</div>
<div class="col">Col B</div>
</div>
逗号表示 OR
以逗号分隔的查询类似于 OR——只要 ANY 查询匹配，样式就会应用：
<div class="page">
Comma as OR
<div class="sidebar">Sidebar</div>
</div>
not 运算符
not 会否定整个媒体查询。使用时必须谨慎——它作用于整个查询表达式，而不仅仅是第一个条件。
<div class="doc">not operator demo</div>
带括号的 not（现代语法）
现代第 4 级媒体查询允许将 not() 作为函数应用于单个特性：
<div class="panel">not() function demo</div>
only 关键字（旧版）
only 关键字用于向不支持媒体特性的旧版浏览器隐藏媒体查询。现代浏览器会忽略它，但它不会造成影响。
<div class="box">only keyword demo</div>
嵌套媒体查询（CSS 嵌套）
使用原生 CSS 嵌套时，可以在选择器块内部编写媒体查询：
<div class="card">Nested media query demo</div>
移动设备 + 高 DPI 组合
专门定位移动设备（屏幕较小且 DPI 较高）：
<div class="icon"></div>
打印 + 颜色
用于打印样式的多个媒体特性，仅应用于彩色打印机：
<div class="chart">Chart (color reverts when printing on a color printer)</div>
@import 中的媒体查询
可以在导入时应用媒体查询，以有条件地加载整个样式表（不过这会阻塞渲染，因此应谨慎使用）：
<div class="page">Page content (conditionally imported stylesheets apply above)</div>
复杂查询中的逻辑属性
一般来说，查询越简单，就越容易维护。请避免串联过多条件。当查询变得复杂时，请考虑重新设计 CSS 方案，而不是继续复杂化查询。
快速检查
当视口宽度至少为 600px 或设备处于横向时，哪条媒体查询会应用样式？
回顾
and 要求所有条件均为真。查询之间的逗号表示 OR。not 会否定整个查询。结合 min-width 和 max-width 可定位宽度范围。现代 CSS 支持在选择器块中嵌套媒体查询，也支持范围语法，让表达式更加简洁。
常见问题解答
「组合多个媒体查询」课时是免费的吗？
是的 — 「组合多个媒体查询」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。
「组合多个媒体查询」这节课中我会学到什么？
使用 and、or 和 not 运算符，将媒体特性组合成复杂查询。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「组合多个媒体查询」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 CSS Academy 课中编写并运行代码吗？
能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。