如何组合两个媒体查询？答案

【问题标题】：How do I combine two media queries?如何组合两个媒体查询？
【发布时间】：2014-07-16 20:52:12
【问题描述】：

如何组合两个媒体查询？一种适用于较小的设备，另一种适用于较大的设备，但仅限纵向模式！

 @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

【解决方案1】：

这些是媒体查询的运算符：

,（逗号，在媒体查询列表中用作 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/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

优先级

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

【讨论】：

【解决方案2】：

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

例如

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

【讨论】：