能否使用四阶段媒体查询？CSS宽高范围媒体查询问题咨询

完全可以同时结合max-width、min-width、max-height和min-height来定义媒体查询，你的代码失效的核心原因是高度条件存在逻辑矛盾：min-height: 600px要求视口高度至少600px，而max-height: 500px要求视口高度最多500px，这两个条件不可能同时满足，所以整个媒体查询永远不会触发。

修正后的正确代码 #

如果你的需求是匹配宽度在300px-400px之间，且高度在500px-600px之间的视口，只需调整高度的取值顺序，让min-height小于max-height：

@media only screen and (min-width: 300px) and (max-width: 400px) and (min-height: 500px) and (max-height: 600px) {
  .this-is-a-test-class {
    padding-bottom: 100px;
  }
}

拆分多条件媒体查询的写法 #

如果你想通过两个需同时满足的媒体查询实现（单条查询已经足够，这里仅演示拆分逻辑），可以嵌套媒体查询，确保只有当宽高条件都满足时样式才生效：

@media only screen and (min-width: 300px) and (max-width: 400px) {
  /* 在宽度匹配的前提下，再匹配高度范围 */
  @media only screen and (min-height: 500px) and (max-height: 600px) {
    .this-is-a-test-class {
      padding-bottom: 100px;
    }
  }
}

内容的提问来源于stack exchange，提问作者Ryan1827