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

Question

这个问题类似于CSS媒体查询: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来找到答案,但是没有发布任何问题,所以如果这个问题不完整,请告诉我.

-edit-我进入了错误的状态(min-height而不是max-height)

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;}
}