如何在CSS媒体查询中实现严格不等式

嘿，这个问题在HiDPI屏幕场景下确实很常见——毕竟逻辑宽度出现小数是正常情况，而默认的min-width/max-width都是弱不等式，没法直接实现严格的>或<。不过有两个实用方案可以解决，我给你拆解清楚：

方法一：利用小数像素值（兼容性好，推荐） #

核心思路是给阈值加/减一个极小的像素值，把弱不等式“转化”为严格不等式：

实现严格大于（> X） #

比如你要匹配严格大于600px的宽度，就把min-width的阈值设为X + 0.001px：

@media (min-width: 600.001px) {
  /* 这里的样式只会在逻辑宽度>600px时生效，比如600.5px */
}

原理很直白：min-width是>=判断，当宽度刚好是600px时，600 < 600.001，不满足条件；而只要宽度比600px大哪怕一点点（比如600.001px及以上），都会触发这个媒体查询，完美实现严格大于的效果。

实现严格小于（< X） #

要匹配严格小于600px的宽度，就把max-width的阈值设为X - 0.001px：

@media (max-width: 599.999px) {
  /* 这里的样式只会在逻辑宽度<600px时生效，比如599.5px */
}

同理：max-width是<=判断，当宽度刚好是600px时，600 > 599.999，不满足条件；所有小于600px的宽度都会触发样式。

方法二：使用CSS范围媒体查询（现代浏览器专属） #

如果你的项目只需要兼容现代浏览器（比如Chrome 105+、Firefox 98+、Safari 15.4+），可以直接用CSS4新增的范围媒体查询语法，它原生支持严格不等式，写法更直观：

严格大于 #

@media (width > 600px) {
  /* 样式 */
}

严格小于 #

@media (width < 600px) {
  /* 样式 */
}

这个语法不需要计算小数，但兼容性不如第一种方法，所以如果要覆盖更多旧浏览器，还是优先用第一种方案。

额外注意事项 #

• 为什么选0.001px？这个值平衡了浏览器精度和实际场景：太小的数值（比如0.0001px）可能被部分浏览器取整忽略，而0.001px在大部分现代浏览器中都能被正确识别。
• 若要匹配区间范围（比如600px < width < 800px），可以结合两种写法：

  /* 兼容旧浏览器的写法 */
  @media (min-width: 600.001px) and (max-width: 799.999px) {
    /* 样式 */
  }
  
  /* 现代浏览器的原生写法 */
  @media (width > 600px) and (width < 800px) {
    /* 样式 */
  }
  

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