Media query max-width:767px在宽度恰好为767px时未生效的问题

问题描述 #

编写如下CSS媒体查询规则：

@media screen and (max-width: 767px) {
  div {
    display: none;
  }
}

预期设备宽度为767px或更小时隐藏div，但实际在宽度恰好为767px时div仍可见，766px时正常隐藏。测试发现将阈值设为767.2px时有效，767.1px时无效，Windows 10系统下Chrome、Firefox均存在此问题。

根本原因 #

这不是浏览器bug，核心原因是CSS像素与物理像素的换算差异：

• Windows系统的高DPI缩放（如125%、150%等）会让CSS像素和屏幕物理像素不再是1:1对应。当你拖动浏览器窗口到系统显示的「767px」宽度时，实际的CSS视口宽度会是一个带小数的数值（比如767.15px），这个值略大于767px，因此max-width:767px的媒体查询不会触发。
• 测试中767.1px无效、767.2px有效，说明实际视口的小数部分刚好落在767.1到767.2之间，比如767.15px：此时max-width:767.1px仍小于实际宽度，查询不生效；而767.2px大于实际宽度，查询触发。

解决方案 #

推荐两种可靠的处理方式：

1. 使用带小数的阈值覆盖所有可能的小数情况，比如767.99px：

   @media screen and (max-width: 767.99px) {
     div {
       display: none;
     }
   }
   

   这个值足够大，能覆盖所有因DPI缩放产生的略大于767px的小数宽度，同时不会误触发768px及以上的场景。
2. 反向编写媒体查询，针对768px及以上的场景设置显示，其余情况隐藏：

   div {
     display: none;
   }
   @media screen and (min-width: 768px) {
     div {
       display: block;
     }
   }
   

   这种写法逻辑更直观，也能避免小数宽度的换算问题。

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