媒体查询是 CSS 中用于响应不同设备类型、屏幕尺寸或方向的重要工具。通过使用媒体查询，你可以为不同的条件定义特定的样式规则。Stylus 提供了对 CSS 媒体查询的强大支持，使得编写响应式设计更加灵活和简洁。
基本用法
媒体查询的基本结构类似于 CSS 的 @media 规则。在 Stylus 中，你可以直接使用 CSS 语法，也可以采用更简洁的方式表达。下面是一个简单的例子：
@media (max-width 768px)
body
background-color: #eee上述代码表示当屏幕宽度小于或等于 768px 时，页面背景色将变为浅灰色。
媒体类型
媒体类型允许你根据设备类型应用样式。常见的媒体类型包括 screen, print, all 等。以下是如何在 Stylus 中使用媒体类型：
@media screen and (max-width 900px)
.container
width: 100%此示例仅当设备类型为屏幕且屏幕宽度小于或等于 900px 时生效。
多个条件
你可以组合多个条件来创建更复杂的媒体查询。在 Stylus 中，这可以通过简单的逻辑操作符实现：
@media (min-width 500px) and (max-width 700px), print
.header
font-size: 14px这里，.header 的字体大小将在屏幕宽度介于 500px 到 700px 之间或者打印时应用。
嵌套媒体查询
Stylus 允许你在嵌套选择器中直接嵌入媒体查询，从而简化代码并提高可读性：
.container
width: 100%
@media (max-width 600px)
width: 50%在这个例子中，.container 在所有情况下都将占据 100% 宽度，但在屏幕宽度小于或等于 600px 时会缩小到 50%。
功能函数
除了基本的媒体特性外，Stylus 还提供了多种功能函数来增强媒体查询的能力。例如，可以使用 orientation 函数来检查设备的方向：
@media (orientation portrait)
.sidebar
display: none该示例会在设备处于纵向模式时隐藏侧边栏。
使用变量
在 Stylus 中，你可以利用变量来管理媒体查询中的断点值，使代码更具可维护性：
-- -------------------- ---- -------
----------------- - -----
------------------ - -----
------ ---------- ------------------
--------
-------- ----
------ ---------- ------------------ --- ---------- -------------------
--------
-------- ----这样做的好处在于，如果需要调整断点值，只需修改变量即可。
结合其他 CSS 属性
媒体查询还可以与其它 CSS 属性结合使用，以实现更复杂的设计需求。例如，可以将媒体查询与 Flexbox 或 Grid 一起使用，以创建响应式的布局：
.container
display: flex
flex-wrap: wrap
@media (max-width 700px)
flex-direction: column这个例子展示了如何在小屏幕上改变容器的排列方式。
总结
通过使用 Stylus 的媒体查询功能，你可以轻松地为不同的屏幕尺寸和设备类型创建适应性强的设计。从基础的媒体类型和条件组合，到嵌套查询、变量使用以及与其他 CSS 特性的结合，Stylus 提供了丰富的选项来帮助开发者构建现代的响应式网站。