title: Why does Bootstrap use a 0.02px difference between screen size thresholds in its media queries?
body: <pre><code>// 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) { ... }
  </code></pre>
  
  <p>Code sample source: <a href="https://getbootstrap.com/docs/4.1/layout/overview/" rel="noreferrer">https://getbootstrap.com/docs/4.1/layout/overview/</a></p>
  
  <p>What's the reason for using <code>.98px</code>? Cross-browser compatibility?</p>
  
  <p>Related: <a href="https://stackoverflow.com/q/13241531">What are the rules for CSS media query overlap?</a></p>