如何组合两个媒体查询?

问题描述 投票:10回答:2

如何组合两个媒体查询?一个用于较小的设备,一个用于较大的设备,但仅限于纵向模式!

 @media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : landscape){
#div {margin-top: 20px;}
}

}
@media only screen 
and (min-device-width : 481px) 
and (max-device-width : 1024px) 
and (orientation : portrait){
{margin-top: 20px;}
}
css media-queries
2个回答
23
投票

不完全清楚你想要结合什么,但基本上你用逗号分隔它们

例如

@media only screen and (orientation : landscape) , only screen and (min-device-width : 481px) and (orientation : portrait) { ...

11
投票

这些是媒体查询的运营商:

  • ,(逗号,在媒体查询列表中作为OR工作)
  • and
  • not
  • only

例子:

@media screen and (color), print and not (color) {...}
@media (min-width: 640px) and (max-width: 767px) {...}
@media (max-width: 639px), (min-width: 768px) {...}

见:https://developer.mozilla.org/de/docs/Web/CSS/Media_Queries/Using_media_queries

Precedence

  • ,被解释为ORed的单个媒体查询列表中的分隔符。因此,首先评估逗号之间的每个媒体查询,然后将它们一起进行OR运算。这使得逗号/ OR具有最低优先级。
  • not始终适用于整个媒体查询,而不会延伸逗号。这不是逗号/ OR之后的第二低优先级。
  • notonly是互斥的,具有相同的优先权。
  • and具有最高优先级
  • ()括号仅用于媒体特征及其值,即(color)(min-width: 320px)。它们不能用于通过分组表达式来更改优先级。
© www.soinside.com 2019 - 2024. All rights reserved.