Stylus 中文网

Appearance

Return to top
On this page

@media

@media 查询的工作方式与常规 CSS 中的工作方式相同，但使用 Stylus 的块表示法：

¥The @media queries work just as they do within regular CSS, but with Stylus's block notation:

@media print
  #header
  #footer
    display none

@media print
  #header
  #footer
    display none

产量：

¥Yielding:

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

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

媒体查询冒泡

¥Media Query Bubbling

媒体查询也可以嵌套，并且它们将被扩展以封装它们使用的上下文。例如：

¥Media queries can be nested, too, and they will be expanded to wrap the context in which they are used. For example:

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

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

产量：

¥Yielding:

.widget {
  padding: 10px;
}

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

.widget {
  padding: 10px;
}

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

嵌套媒体查询

¥Nested media queries

你可以将 @media 嵌套到另一个中，它们将合并为一个：

¥You can nest @medias one into another and they would combine into one:

@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 (min-width: 100px), (min-height: 200px)
    .foo
      color: #100

会屈服于

¥Would yield to

@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;
  }
}

@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;
  }
}

插值和变量

¥Interpolations and variables

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

¥You can use both interpolations and variables inside media queries, so it is possible to do things like this:

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

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

这会产生

¥This would yield

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

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

也可以在 MQ 中使用表达式：

¥It is also possible to use expressions inside MQ:

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

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

将屈服于

¥would yield to

@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;
  }
}

@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;
  }
}