一、简介

@media 查询的工作原理和常规 CSS 中的完全一致，但是需要使用 Stylus 的代码块表示法（block notation）：

@media print
  #header
  #footer
    display none

转换为：

@media print {
  #header,
  #footer {
    display: none;
  }
}

二、嵌套时冒泡

媒体查询同样支持嵌套使用，嵌套的查询规则在编译时会被展开，并冒泡到根部，并包裹住使用它们的上下文。如下例所示：

.widget
  padding 10px

  @media screen and (min-width: 600px)
    padding 20px

转换为：

.widget {
  padding: 10px;
}

@media screen and (min-width: 600px) {
  .widget {
    padding: 20px;
  }
}

三、媒体查询互相嵌套

你可以将一个 @media 嵌套到另一个 @media 中，其逻辑会类似于 and，它们将合并成一个：

@media (max-width: 500px)
  .foo
    color: #000

  @media (min-width: 100px), (min-height: 200px)
    .foo
      color: #100

转换为：

@media (max-width: 500px) {
  .foo {
    color: #000;
  }
}
// 此处合并了两个查询条件
@media (max-width: 500px) and (min-width: 100px),
  (max-width: 500px) and (min-height: 200px) {
  .foo {
    color: #100;
  }
}

四、结合插值语法和变量

可以在媒体查询中同时使用插值语法和变量，因此可以执行以下操作：

foo = 'width'
bar = 30em
@media (max-{foo}: bar)
  body
    color #fff

转换为：

@media (max-width: 30em) {
  body {
    color: #fff;
  }
}

五、结合表达式

可以在媒体查询中使用表达式：

.foo
  for i in 1..4
    @media (min-width: 2**(i+7)px)
      width: 100px*i

转换为：

@media (min-width: 256px) {
  .foo {
    width: 100px;
  }
}
@media (min-width: 512px) {
  .foo {
    width: 200px;
  }
}
@media (min-width: 1024px) {
  .foo {
    width: 300px;
  }
}
@media (min-width: 2048px) {
  .foo {
    width: 400px;
  }
}

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24