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

优先级

,被解释为“或”的单个媒体查询列表中的定界符。因此，首先评估逗号之间的每个媒体查询，然后将它们进行“或”运算。这样，逗号或OR的优先级最低。
not始终适用于整个媒体查询，而不用逗号分隔。这不是逗号/ OR之后的第二低的优先级。
not和only是互斥的，并且具有相同的优先级。
and的优先级最高
()括号仅用于媒体功能及其值，即(color)或(min-width: 320px)。不得通过对表达式进行分组来更改优先级。

如何组合两个媒体查询？

2 个答案:

优先级