如何组合两个媒体查询？

Question

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

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

Answer 1

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

例如

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

Answer 2

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

• , (逗号,在媒体查询列表中作为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

优先权

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