css - 多个媒体查询 : max-width or 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;)
}

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

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

我的浏览器将使用哪个查询？最小高度会否决最小宽度吗？还是会跳过最小高度并转到最小宽度查询 (960px)？

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

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

Answer 1

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

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

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