L3F.WIN

Github及Hexo的使用

0%

学习stylus【12】@MEDIA

发表于 更新于 分类于

@MEDIA

@media工作原理和在常规CSS中一样，但是，要使用Stylus的块状符号。

1
2
3
4
5
6
7
8
9
10
11
@media print
  #header
  #footer
    display none
=>
@media print {
  #header,
  #footer {
    display: none;
  }
}

媒体查询冒泡

媒体查询也可以嵌套，并且它们可以扩展到包含它们所使用的上下文。 例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.widget
  padding 10px

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

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

嵌套媒体查询

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@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;
  }
}

插值和变量

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

1
2
3
4
5
6
7
8
9
10
11
foo = 'width'
bar = 30em
@media (max-{foo}: bar)
  body
    color #fff
=>
@media (max-width: 30em) {
  body {
    color: #fff;
  }
}

也可以使用MQ内部的表达式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.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;
  }
}