Bootstrap 4自定义媒体查询触发宽度与默认断点错位问题

首先核心问题是对媒体查询的宽度匹配逻辑存在误解，叠加硬编码断点值和Bootstrap官方断点的设计差异，导致匹配范围出现了1px的漏覆盖区间：

• 视口宽度是连续可细到0.01px的非整数值，并非只有整数像素档位。手动拖动窗口调整宽度时，实际视口宽度不会严格卡在整数上，开发者工具显示的宽度值是四舍五入后的近似整数。
• 写的max-width: 575px媒体查询，仅覆盖视口宽度≤575px的范围。但Bootstrap 4官方定义的移动端xs断点，实际覆盖视口宽度<576px的所有范围（官方编译后的阈值是max-width: 575.98px，为了和≥576px的sm断点留0.02px的间隔，避免断点临界值的样式重叠冲突）。
• 这就导致在575px < 视口宽度 < 576px这近1px的区间里：Bootstrap的移动端网格、组件样式已经正常生效，但自定义媒体查询因为阈值设为575px，根本不覆盖这段范围，自定义样式完全不生效，直接造成布局混乱。

感知到的“要等视口降到574px才生效”，本质是当窗口缩到开发者工具显示的575px时，实际视口宽度是略大于575px的（比如575.05px），没达到设置的575px阈值，所以样式不触发；继续缩1px到开发者工具显示的574px时，实际视口宽度已经降到575px阈值以下，样式才会加载。

之前尝试把阈值改成576px的方案存在逻辑问题：因为Bootstrap的sm断点是从≥576px开始触发的，当视口宽度刚好等于576px时，本来应该是平板端布局的起点，max-width:576px会让自定义样式在这个宽度下也生效，造成端样式和移动端样式的重叠冲突。

修复方案 #

• 彻底弃用硬编码的整数断点值，完全对齐Bootstrap官方的断点逻辑，不要自行估算575、576这类阈值。
  • 如果项目是用Sass编译的，直接调用Bootstrap内置的断点mixin，不要手写媒体查询：

  // 自动匹配Bootstrap xs断点：覆盖所有<576px的移动端范围
  @include media-breakpoint-down(xs) {
    .marbling {
      background: none;
      border-left: 0 solid;
    }
    h2.podstrona-tytul {
      margin-top: 180px;
      text-align: center;
    }
  }
  

  这个mixin编译出来的媒体查询阈值和Bootstrap自身样式完全一致，不会出现漏覆盖、错覆盖的问题。
  • 如果是纯CSS开发没法用Sass，直接使用官方的断点阈值编写：

  @media only screen and (max-width: 575.98px) {
    .marbling {
      background: none;
      border-left: 0 solid;
    }
    h2.podstrona-tytul {
      margin-top: 180px;
      text-align: center;
    }
  }
  

• 测试断点时不要手动拖动浏览器窗口判断效果，直接开开发者工具的设备模拟模式，精准设置575px、576px的固定视口宽度，这个模式下的宽度测量不会有四舍五入误差，也不会受系统滚动条占位的影响，测试结果和真实用户的匹配逻辑完全一致。
• 确认自定义CSS文件的加载顺序在Bootstrap CSS文件之后，避免同优先级下Bootstrap样式覆盖自定义规则。

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