@media工作原理和在常规CSS中一样,但是,要使用Stylus的块状符号。
1 2 3 4 5 6 7 8 9 10 11
| @media print display none => @media print { 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:
@media (min-width: 100px), (min-height: 200px) .foo color: => @media (max-width: 500px) { .foo { color: } } @media (max-width: 500px) and (min-width: 100px), (max-width: 500px) and (min-height: 200px) { .foo { color: } }
|
插值和变量
你可以在媒体查询中使用插值和变量,因此可以执行如下操作:
1 2 3 4 5 6 7 8 9 10 11
| foo = 'width' bar = 30em @media (max-{foo}: bar) body color => @media (max-width: 30em) { body { color: } }
|
也可以使用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; } }
|