当页面 100% 缩放时,CSS 媒体查询不起作用

when page is 100% zoom, CSS Media Query doesnt' work

我有 2 个媒体查询。

@media screen and (max-device-width: 1199px) {
  #content-id {  
      height: 480px !important;
      background: rgb(16, 25, 100);
      width: 99%;
      border-radius: 5px;
      margin-top: 0px;
      max-height: 30%;
    }
}

2:

@media screen  and (min-device-width: 1200px) {
  #content-id {   
    height: 580px !important;
    background: rgb(124, 57, 57);
    width: 99%;
    max-height: 30%;
  }
} 

正如你所看到的背景和高度不同。当页面大小改变时,它们必须改变。

我用Chrome。当我用鼠标手动缩小页面时,它不起作用。浏览器的缩放比例为 100%。但我按右键单击并进行检查。在我设置设备(ipad 或响应式等)之后,它就可以工作了。如果我那样做,缩放会自动小于 100%。

所以,我认为页面的缩放导致了这个问题。但我无法解决这个问题。你能帮帮我吗?

尝试通过删除 'screen' 并将 'max-device-width' 更改为 'max-width' 并将 'min-device-width' 更改为 'min-width'[=11= 来将媒体查询更改为更简单的内容]

@media (max-width: 1199px) {
  #content-id {  
      height: 480px !important;
      background: rgb(16, 25, 100);
      width: 99%;
      border-radius: 5px;
      margin-top: 0px;
      max-height: 30%;
    }
}

@media (min-width: 1200px) {
  #content-id {   
    height: 580px !important;
    background: rgb(124, 57, 57);
    width: 99%;
    max-height: 30%;
  }
} 

max-device-width 和 min-device-width 已在媒体查询 4 ​​中弃用,您正在针对固定的设备宽度进行测试,因此永远不会应用其中一种样式。尝试使用 max-width 而不是普通屏幕不需要媒体查询

@media (max-width: 1199px) {
  #content-id {  
      height: 480px !important;
      background: rgb(16, 25, 100);
      width: 99%;
      border-radius: 5px;
      margin-top: 0px;
      max-height: 30%;
    }
}


  #content-id {   
    height: 580px !important;
    background: rgb(124, 57, 57);
    width: 99%;
    max-height: 30%;
  }

您可以在以下位置查看有关媒体查询的更多信息:https://learnjsx.com/category/1/posts/mediaQueries