Bootstrap媒体查询宽度差值递增原因及1400px以上断点标准

Bootstrap原生默认断点配置如下：

@media (min-width: 576px) {
  .container-sm, .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container-md, .container-sm, .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container-lg, .container-md, .container-sm, .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1320px;
  }
}

断点与容器宽度差值递增的底层逻辑 #

你观察到的(min-width - max-width)差值随宽度增大递增，不是刻意设计的数值递增规则，是Bootstrap栅格体系两个核心设计原则带来的自然结果：

• 固定比例的侧边留白规则。统计各档差值占断点宽度的比例可以发现：576px档差值36px（占比6.25%）、768px档差值48px（占比6.25%）、992px档差值32px（占比3.2%，这一档刻意收窄留白是为了适配平板横屏的触控热区，避免内容区域过小）、1200px档差值60px（占比5%）、1400px档差值80px（占比5.7%），整体留白占视口宽度的比例始终稳定在3%-6%区间。视口尺寸越大，用户通常离屏幕的视距越远，相同像素的视觉感知尺寸越小，等比例放大留白绝对值，既可以保证正文行长维持在45-75字符的舒适阅读区间，避免行太长导致读串行，也能避免大屏下内容贴边带来的视觉失重感。
• 整像素栅格的渲染要求。Bootstrap的12列栅格要求每一列宽度为整像素，避免半像素导致的边框、文字渲染模糊，容器宽度是12列宽度+11个列间距（gutter）凑整后的结果，剩下的宽度自动作为两侧等距留白。列间距本身会随断点增大等比例放大，最终的留白绝对值自然会随断点宽度上涨。

1400px以上的宽度设置参考 #

Bootstrap官方没有在1400px（xxl断点）之上预设默认断点，行业内通用配置完全可以沿用原生的等比例留白规则，不需要设置随机数值，目前主流的可直接复用的配置如下：

• 1600px断点（可命名为container-xxxl）：container最大宽度设为1520px，总留白80px，和1400px档的留白比例接近，视觉上不会有跳变
• 1920px断点（当前桌面端最高主流分辨率，可覆盖27寸及以下常规显示器）：container最大宽度设为1820px，总留白100px，左右各50px，留白占比约5.2%，和原生断点逻辑完全对齐

自定义配置时只要遵守两个规则就不会出现体验问题：一是侧边总留白占当前断点宽度的比例维持在4%-6%区间，不要突然放大或缩小留白导致视觉割裂；二是列间距、容器内边距随断点等比例缩放，和留白尺寸保持视觉协调，不需要设置过密的断点，两档足够覆盖绝大多数桌面大屏场景。

内容的提问来源于stack exchange，提问作者abenci