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的原因是什么？跨浏览器兼容性？

相关：What are the rules for CSS media query overlap?

Answer 1

没有一种好方法来使两个基于px的@media规则互斥而没有间隙，而没有repeating the same media query twice and using the not keyword-很难理解的是DRY-和the < and > syntax new to Media Queries 4尚未得到广泛支持。正如您在对链接问题的回答中所看到的，（在此示例中）宽度恰好为576px的视口将同时匹配max-width: 576px和min-width: 576px，这可能会导致问题（某些情况下会级联，），因为将应用这两个规则的属性。因此，大多数作者选择最小和最大约束相差1个像素，如果担心非像素密度的高分辨率显示器不能将每个CSS像素缩放到整个设备像素，则选择最小约束或最大约束为以下条件（例如1.5）。

真正的跨浏览器兼容性是原因：根据Bootstrap的消息来源，使用0.02px“而不是0.01px来解决Safari中当前的四舍五入错误。请参见https://bugs.webkit.org/show_bug.cgi?id=178261”（可以预见， 2018年7月的日期仍未修复）。从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);
}

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

1 个答案: