媒体查询max-width属性异常：767px宽度样式不生效600px正常

你的媒体查询语法符合W3C规范，max-width 匹配逻辑本身包含边界等值，正常情况下767px应当命中第二段查询规则，出现该问题的常见诱因有三类：

• 小数像素适配偏差
  高DPI屏幕下，系统或浏览器的缩放比例（如Windows默认125%、150%缩放）会导致物理像素转换为CSS像素时出现非整数值。你感知到的767px宽度，实际计算出的CSS像素可能为767.02px，超出max-width:767px的匹配范围；而600px对应的CSS计算值刚好小于等于600，因此可以正常命中。
• 滚动条宽度计算逻辑差异
  桌面端浏览器的垂直滚动条默认会占用视口宽度，不同浏览器对媒体查询宽度是否包含滚动条的实现逻辑有差异，如果你拖拽窗口刚好到767px，实际参与匹配的视口宽度可能已经超出阈值。
• 后续规则覆盖
  若你后续还定义了min-width:768px的媒体查询，相同优先级的样式可能会覆盖767px对应的规则，呈现出未命中的假象。

1. 优先采用min-width从小到大的叠加写法，从根源避免边界值冲突：

/* 默认适配<414px场景 */
@media (min-width: 414px) {
  /* 适配≥414px */
}
@media (min-width: 601px) {
  /* 适配≥601px */
}
@media (min-width: 768px) {
  /* 适配≥768px */
}

2. 若必须使用max-width规则，可给边界值添加0.02px的偏移量，规避小数像素问题：

@media screen and (min-width: 414px) and (max-width: 600.02px) {
  /* 样式代码 */
}

@media screen and (min-width: 601px) and (max-width: 767.02px) {
  /* 样式代码 */
}

3. 确认HTML头部已添加正确的viewport配置，避免移动端默认视口缩放导致的适配偏差：

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

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