多个媒体查询：max-width或max-height

Question

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

与其他主题中的海报一样，我有DIV的某些规格的媒体查询。

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

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

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

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

我的浏览器会使用哪个查询？ 最小高度是否会超过最小宽度？或者它会跳过最小高度并转到最小宽度查询（960px）？

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

CNC中 我输入了错误的条件（最小高度而不是最大高度）

Answer 1

一旦条件匹配，它将使用所有这些。因此，用于.center的规则将是最后一个被定义的规则（通常在css中，后面的定义会覆盖早期的定义）

但是，据我了解你想对你的查询做什么，不会更像是

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

Answer 2

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

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