为什么 Bootstrap 在其媒体查询中使用 0.02 像素的屏幕尺寸阈值差异？
Why does Bootstrap use a 0.02px difference between screen size thresholds in its media queries?
// 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) { ... }
代码示例来源：https://getbootstrap.com/docs/4.1/layout/overview/
使用.98px的原因是什么？跨浏览器兼容性？
相关：What are the rules for CSS media query overlap?
没有很好的方法使两个基于 px 的 @media 规则互斥且没有间隙，而 repeating the same media query twice and using the not keyword — which isn't very readable much less DRY — and the < and > syntax new to Media Queries 4 尚未得到广泛支持。正如您在我对链接问题的回答中看到的那样，（在本例中）恰好 576px 宽的视口将同时匹配 max-width: 576px 和 min-width: 576px，这可能会导致问题（有些级联有些不) 因为来自两个规则的属性将被应用。因此，如果大多数作者担心具有非整数像素密度的高分辨率显示器不会将每个 CSS 像素缩放到全设备像素（例如 1.5）。
事实上，跨浏览器兼容性是原因：根据 Bootstrap 的来源，使用 0.02px 而不是 0.01px 来解决 Safari 中当前的舍入错误。参见 https://bugs.webkit.org/show_bug.cgi?id=178261" (that, predictably, as of July 2018 still hasn't been fixed). Starting from line 31 of _breakpoints.scss:
// 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);
}
// 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) { ... }
代码示例来源：https://getbootstrap.com/docs/4.1/layout/overview/
使用.98px的原因是什么？跨浏览器兼容性？
相关：What are the rules for CSS media query overlap?
没有很好的方法使两个基于 px 的 @media 规则互斥且没有间隙，而 repeating the same media query twice and using the not keyword — which isn't very readable much less DRY — and the < and > syntax new to Media Queries 4 尚未得到广泛支持。正如您在我对链接问题的回答中看到的那样，（在本例中）恰好 576px 宽的视口将同时匹配 max-width: 576px 和 min-width: 576px，这可能会导致问题（有些级联有些不) 因为来自两个规则的属性将被应用。因此，如果大多数作者担心具有非整数像素密度的高分辨率显示器不会将每个 CSS 像素缩放到全设备像素（例如 1.5）。
事实上，跨浏览器兼容性是原因：根据 Bootstrap 的来源，使用 0.02px 而不是 0.01px 来解决 Safari 中当前的舍入错误。参见 https://bugs.webkit.org/show_bug.cgi?id=178261" (that, predictably, as of July 2018 still hasn't been fixed). Starting from line 31 of _breakpoints.scss:
// 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);
}