多个媒体查询：最大宽度或最大高度

Question

这个问题类似于CSS media queries: max-width OR max-height，但是由于我的rep不够高，所以我无法在回复中添加评论（问题），我想在原始问题中添加。

与其他主题中的海报一样，我对 DIV 有特定规范的媒体查询。

@media only screen and (min-width:460px){
.center{width:250px;}
}

@media only screen and (min-width:960px){
.center{width:350px;)
}

现在，当屏幕为 960 像素宽时，我希望中心 DIV 为 250 像素宽，但只有 400 像素高。如果我将第一个媒体查询设置为此：

@media only screen and (min-width:460px), screen and (max-height:400px){
.center{width:250px;}
}

我的浏览器将使用哪个查询？ 最小高度会超过最小宽度吗？还是会跳过 min-height 转到 min-width 查询（960px）？

我经常使用 Stack Overflow 来寻找答案，但没有发布任何问题，所以如果这不完整，请告诉我。

-编辑- 我输入了错误的条件（最小高度而不是最大高度）

Answer 1

我希望了解你真正需要什么，但是为了加入两个规则，我使用这种语法，这对我有用：

@media only screen and (min-width:460px), (max-height:400px){
   .center{width:250px;}
}

Answer 2

只要条件匹配，它就会使用所有这些。所以用于 .center 的规则将是最后一个被定义的规则（就像在 css 中一样，后面的定义会覆盖早期的定义）

但据我了解，您想对查询执行什么操作，不是更像

@media only screen and (min-width:460px) and (max-height:400px){
.center{width:250px;}
}