CSS媒体查询问题：1280x1024分辨率窗口模式不生效求助

你的核心问题出在固定高度的媒体查询条件上：(height:1024px)只有当浏览器视口高度精确等于1024px时才会生效，但窗口模式下，系统任务栏、浏览器工具栏会占用部分屏幕高度，导致视口高度达不到1024px，规则自然不会触发。

同时要区分1280x1024和1280x768的场景，只需利用两者的高度差异——1024px远大于768px，结合宽度范围即可精准匹配，不会互相干扰。

修改后的媒体查询代码 #

/* 适配1280x1024分辨率及窗口模式下的近似场景 */
@media screen and (min-width: 1200px) and (max-width: 1300px) and (min-height: 950px) and (max-height: 1024px) {
  .white_round_background{
    margin-left: 320px;
    height: 170vh;
    width: 160vw;
    background-color: rgb(197, 183, 183);
  }

  .menunav {
    left: 38%;
    top: 4%;
  }

  .system_selection {
    margin: 420px 0 0 0px;
    height: 95px;
  }

  #logo_sliding_menu {
    margin-top: 710px;
  }
}

关键调整说明 #

• 宽度范围：min-width:1200px和max-width:1300px覆盖了1280px左右的窗口宽度，即使窗口不是完全1280px宽也能触发。
• 高度范围：min-height:950px和max-height:1024px适配了窗口模式下的视口高度（扣除任务栏/工具栏后的剩余高度），同时因为1280x768的高度仅768px，远低于950px，所以不会干扰该分辨率的媒体查询规则。

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