Media queries设置max-width:1200px却在1183.20px异常触发

原因说明 #

• 滚动条宽度占用：桌面端浏览器默认垂直滚动条宽度约为17px，@media查询的width统计的是包含滚动条的视口总宽度，你在调试面板看到的1183.2px是扣除滚动条后的内容区宽度，两者相加刚好是1200px，因此达到媒体查询触发阈值。
• 非整数像素来源：如果操作系统显示缩放比例不是100%（如Windows默认125%/150%、Mac非原生缩放档位），即使浏览器缩放比例为100%，CSS像素与物理像素换算过程中也会产生精度偏移，出现非整数的宽度数值。
• window.innerWidth的统计逻辑符合规范：该API返回的就是包含滚动条的布局视口总宽度，因此内容区为1183.2px时返回1200属于正常表现。

解决方案 #

• 如果你需要媒体查询和内容区宽度对齐，可以给根元素设置overflow: overlay让滚动条悬浮在内容上方不占用宽度（仅webkit内核浏览器支持），或者将媒体查询阈值调整为1217px，抵消滚动条宽度的影响。
• 规避小数精度问题可以在媒体查询中使用round()函数修正精度，示例如下：

@media only screen and (max-width: round(down, 1200px, 1px)) {
    .tool-panel {
        margin: 0px 24px 0px 0px;
    }
}

• 如果需要完全规避滚动条影响，可改用JS监听内容区宽度实现响应式逻辑。

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