页面100%缩放时CSS Media Query不生效问题求助

你使用的min-device-width、max-device-width媒体查询规则匹配的是设备的物理屏幕宽度，该值仅和你使用的显示器硬件参数有关，不会随浏览器窗口大小调整、页面缩放而变化。你拖动桌面端浏览器边缘调整窗口大小时，设备物理宽度始终不变，所以规则不会触发切换。而开发者工具的设备模拟功能会修改浏览器上报的设备宽度参数，因此可以正常命中对应规则。

将所有媒体查询中的device-width替换为width即可，width匹配的是浏览器当前视口的宽度，会随窗口大小调整、页面缩放实时变化，符合你的预期效果。

修改后的代码如下：

/* 视口宽度小于等于1199px时生效 */
@media screen and (max-width: 1199px) {
  #content-id {  
      height: 480px !important;
      background: rgb(16, 25, 100);
      width: 99%;
      border-radius: 5px;
      margin-top: 0px;
      max-height: 30%;
    }
}

/* 视口宽度大于等于1200px时生效 */
@media screen and (min-width: 1200px) {
  #content-id {   
    height: 580px !important;
    background: rgb(124, 57, 57);
    width: 99%;
    max-height: 30%;
  }
} 

• 在HTML的<head>标签中添加视口元标签，保证移动端适配的效果符合预期：

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  

• 如果你需要针对不同物理尺寸的设备做区分适配，再使用device-width相关规则，常规响应式布局使用width即可满足需求。

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