Windows系统下1023px宽度时Media query媒体查询不生效问题问询

问题原因 #

1. 核心诱因是Windows系统的显示缩放精度问题：Windows设备默认常开启125%/150%等非100%系统缩放，此时DevTools设置的整数逻辑像素换算为物理像素时会产生小数精度偏差，刚好卡在1023px和1024px的临界间隙，导致两个媒体查询都未匹配到样式。Linux、MacOS对缩放的像素精度处理逻辑和Windows不同，所以不会触发该临界值匹配失败的问题，和你观察到的跨系统表现一致。
2. 写法层面的潜在问题：你当前的写法用相邻的min-width和max-width拆分阈值，天然存在临界间隙风险，且如果没有用Sass/LESS等预处理器的话，原生CSS对选择器内嵌套@media的支持依赖较新的CSS Nesting特性，部分浏览器版本可能存在兼容问题。

解决方法 #

方案1：优先使用移动端优先的覆盖写法（最稳妥无兼容问题） #

直接默认写小屏样式，仅用min-width覆盖大屏规则，从根源避免临界断层：

/* 宽度小于1024px默认生效红色边框 */
.test {
  border: 2px solid red;
}
/* 宽度≥1024px时覆盖为绿色边框 */
@media screen and (min-width: 1024px) {
  .test {
    border: 2px solid green;
  }
}

方案2：优化媒体查询阈值写法 #

如果必须拆分两个媒体查询，可以用两种方式避免精度问题：

• 使用媒体查询范围语法（现代浏览器支持）：

@media screen and (width >= 1024px) {
  .test {
    border: 2px solid green;
  }
}
@media screen and (width < 1024px) {
  .test {
    border: 2px solid red;
  }
}

• 兼容旧浏览器可以给小屏阈值留0.02px的偏移量，规避缩放精度误差：

@media screen and (min-width: 1024px) {
  .test {
    border: 2px solid green;
  }
}
@media screen and (max-width: 1023.98px) {
  .test {
    border: 2px solid red;
  }
}

额外检查项 #

确认页面头部已添加正确的viewport元标签，保证视口计算逻辑正确：

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

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