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

Question

// 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什么？跨浏览器兼容性？

相关:CSS媒体查询重叠的规则是什么？

Answer 1

还有就是不要让两个基于PX-一个很好的方式@media无间隙互相排斥的规则,而不重复同样的媒体查询两次,并使用not关键字 -这干少得多是不是很可读-和中<和>语法新媒体查询4尚未得到广泛支持.正如你已经看到了我的答案链接的问题,视口是(在这个例子中)正是576px宽将同时匹配max-width: 576px和min-width: 576px同步,这可能会导致问题(有些级联有些没有)来自这两个规则的属性将被应用.因此,如果大多数作者担心高分辨率显示器的非整数像素密度不能将每个CSS像素缩放到整个设备像素,那么大多数作者会选择具有1像素或更小差异的最小约束和最大约束(例如1.5).

实际上,跨浏览器兼容性是原因:根据Bootstrap的来源,0.02px用于"而不是0.01px来解决Safari中当前的舍入错误.请参阅https://bugs.webkit.org/show_bug.cgi?id = 178261 "(可以预见,截至2018年7月仍然没有修复).从_breakpoints.scss的第31行开始:

// 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);
}