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

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

Answer 1

我认为您可以再次使用and而不是逗号：

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

...

}

@media only screen和（max-width：1280px），（min-height：801px）不起作用

1 个答案: