Css 为什么引导程序在其媒体查询中使用屏幕大小阈值之间的0.02px差异？

代码示例源：

使用

.98px

的原因是什么？跨浏览器兼容性

---

相关信息：

没有一种好方法可以使两个基于px的

@媒体

规则相互排斥，没有间隙，没有间隙-这不是很容易阅读，也不是很枯燥-并且还没有得到广泛支持。正如您在我对链接问题的回答中所看到的，一个（在本例中）宽度正好为576px的视口将同时匹配

max width:576px

和

min width:576px

，这可能会导致问题（有些级联，有些则不匹配），因为将应用这两个规则的属性。因此，大多数作者选择使用最小和最大限制，其差值为1像素，或者如果他们担心非整数像素密度的高分辨率显示器无法将每个CSS像素缩放到整个设备像素（例如1.5），则选择最小和最大限制

事实上，跨浏览器兼容性是原因：根据Bootstrap的来源，0.02px“而不是0.01px用于解决Safari中当前的舍入错误。请参阅”（可以预见，截至2018年7月，这一问题仍未得到解决）。从：

---

我想说的是避免重叠，虽然不确定为什么.98准确，而不是.99或其他任意值。。。

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// Maximum breakpoint width. Null for the largest (last) breakpoint.
// The maximum value is calculated as the minimum of the next one less 0.02px
// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.
// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
// See https://bugs.webkit.org/show_bug.cgi?id=178261
//
//    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
//    767.98px
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
  $next: breakpoint-next($name, $breakpoints);
  @return if($next, breakpoint-min($next, $breakpoints) - .02px, null);
}