Stylus

English

中文
中文(张鑫旭)

English

中文
中文(张鑫旭)

外觀

返回頂端
在此頁面

@media

@media 查詢的工作方式與在一般 CSS 中相同，但使用 Stylus 的區塊表示法

@media print
  #header
  #footer
    display none

@media print
  #header
  #footer
    display none

產生

@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)
    padding 20px

產生

.widget {
  padding: 10px;
}

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

.widget {
  padding: 10px;
}

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

巢狀媒體查詢

你可以將 @media 巢狀到另一個中，它們會合併成一個

@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

會產生

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

內插和變數

你可以在媒體查詢中使用內插和變數，因此可以執行類似這樣的操作

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

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

這會產生

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

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

也可以在 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

會產生

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