更改屏幕大小时媒体查询不起作用

Question

这是 div 的 CSS 我正在尝试将最大宽度更改为 800px。我不明白我做错了什么，最大宽度的相同查询适用于其他容器 divs.

  @media(min-width :800px){
    .bodyForClient{
      background: black;
      height: 2000px;
    }
  }



  .bodyForClient{
    height: 100vh;
    width:100%;
    background: rgba(80, 74, 5, 0.802);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
   
}

Answer 1

我注意到两件事。

您将媒体查询放在了顶部，但它应该放在底部。
正如您提到的，您希望在 800px 的 max-width 上进行交互，但在媒体查询中您放置了 min-width，所以它的工作正好相反。

你可以这样申请。

它适用于从（您的屏幕分辨率）到 801px。

.bodyForClient{
    height: 100vh;
    width:100%;
    background: rgba(80, 74, 5, 0.802);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

它适用于 800 像素及以下的屏幕

@media(max-width:800px){
.bodyForClient{
      background: black;
      height: 50vh;
    }
}

给你：https://codepen.io/jskrishna/pen/ZEvNQNW

更改屏幕大小时媒体查询不起作用

Media query not working when I change the screen size

html

css

media-queries