@media only screen and (max-width:1280px), (min-height:801px) 不起作用

Question

我有 css 代码是这样的

@media only screen and (max-width:1280px){
  .numbertable {
    position:relative;
    display: inline-block;
    padding-bottom: 80%;
    vertical-align: middle;
    right:12%;
    width:45%;
  }
  .gears {
    position:relative;
    display: inline-block;
    padding-bottom: 80%;
    vertical-align: middle;
    right:10%;
    width:75%;
    top:15px;
  }
}

@media only screen and (max-width:1280px), (min-height:801px){
  .numbertable {
    position:relative;
    display: inline-block;
    padding-bottom: 80%;
    vertical-align: middle;
    right:12%;
    top:20px;
    width:65%;
  }
  .gears {
    position:relative;
    display: inline-block;
    padding-bottom: 80%;
    vertical-align: middle;
    right:10%;
    width:75%;
    top:15px;
  }
}

根据我的理解，如果我使用的分辨率是 1280px 宽但低于 800px 高度，那么上面的代码适用。但是，如果分辨率高于 800px，则应该应用底部代码。不是这种情况。我刚刚在 1280x800 分辨率下测试了这个，底部代码应用即使它说 min-height 801px，就像 min-height 查询没有生效，这是为什么？

Answer 1

我认为您可以再次输入 and 而不是逗号 :

@media only screen and (max-width: 1280px) and (min-height: 801px) {

...

}

@media only screen and (max-width:1280px), (min-height:801px) 不起作用

@media only screen and (max-width:1280px), (min-height:801px) doesn't work

css

media

svg