媒体查询对奇怪的值生效

Question

这是我的媒体查询，因为我试图让我的反应应用程序响应。

@media screen and (max-height: 800px) {
    font-size: 65px;
    .shuttleObject{
      width: 90%;
    }
  }
}

问题是，当我尝试更改 Chrome 中的 Web 开发人员控制台中的高度和宽度时，此代码在以下情况下有效：

宽度：976px 高度：796px

然后当我走的时候

宽度：976px 高度：797px

不生效

当我将宽度更改为 977px 时，它再次生效。为什么它会这样工作，我能做些什么来只按照它应该的方式工作，这意味着 <800px = in effect, > 800 = 不。

如果我需要提供更多，请告诉我。

Answer 1

希望这有帮助！当屏幕尺寸高度大于 800px 高度时，您可以将所需的 css 属性设置为初始值，然后将其更改为相应的值。 （如给定的示例）。

//use this as intial css values.
.demo{
    font-size: 65px;
    .shuttleObject{
      width: 90%;
    }
 }
 
//Apply css as per your requirement if height is greater than 800px

 @media screen and (min-height:800px) {
    /* style changes when the screen gets larger */
}