CSS media queries 在设定宽度未触发，反而匹配更高分辨率规则

核心原因 #

• 你观测的页面宽度为不含垂直滚动条的视口宽度，但CSS媒体查询的width判定默认包含浏览器垂直滚动条的宽度：Windows平台默认滚动条宽度为17px，MacOS开启滚动条始终显示时宽度为15px，你遇到的宽度差刚好和滚动条宽度匹配：
  • 你设置的首个媒体查询上限为max-width:975px，减去17px滚动条宽度后，不含滚动条的页面宽度到958px就会触发下一级媒体查询，对应你959px-974px区间规则匹配错误的问题
  • 第二个媒体查询上限为max-width:1183px，减去滚动条宽度后，不含滚动条的页面宽度到1166px就会超出查询范围，触发默认的max-width:1147px规则，和你描述的第二个异常场景完全吻合
• 若你是在移动端测试，大概率是HTML头部未添加viewport元标签，导致逻辑像素和物理像素缩放不匹配

修复方案 #

1. 优先在HTML头部添加viewport配置，确保宽度计算和设备实际视口对齐：

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

2. 调整媒体查询的阈值，预留滚动条宽度，同时优化区间写法避免断档：

.cwidth{
    max-width:1147px;
    padding-left:0px;
    padding-right:0px;
}
/* 754px - 992px区间（预留17px滚动条，对应不含滚动条宽度到975px） */
@media screen and (min-width: 754px) and (max-width:992px){
    .cwidth{
        max-width:730px !important;
    }
}
/* 993px - 1200px区间（预留17px滚动条，对应不含滚动条宽度到1183px） */
@media screen and (min-width: 993px) and (max-width:1200px){
    .cwidth{
        max-width:950px !important;
    }
}

3. 若不需要滚动条占用视口宽度，可添加如下样式让滚动条悬浮显示，避免宽度干扰（注意兼容性适配）：

html {
    overflow-y: overlay;
}

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