Bootstrap 5 的断点（Breakpoints）

https://v5.bootcss.com/docs/layout/breakpoints/

Bootstrap 利用断点（Breakpoints）来确定响应式布局在设备或视口（viewport）大小变化时的行为，该宽度可自定义。

核心概念

• 断点（Breakpoints）是响应式设计的组成部分。 通过断点可以控制何时可以在特定视口（viewport）或设备尺寸下调整布局。
• 使用媒体查询按断点构建你的css架构。媒体查询是css的一个特性，允许你根据一组浏览器和操作系统参数有条件地应用样式。Bootstrap最常在媒体查询中使用min-width。
• 移动优先，响应式设计是目标。bootstrap的css旨在应用最少的样式使布局在最小的断点工作，然后分层添加样式以调整该设计以适应更大的设备。这优化了你的css,改善了渲染时间，并为你的访问者提供了良好的体验。

可用的断点

bootstrap内置了6个默认断点，有时也被称为栅格层，用于构建响应式。如果你使用的是bootstrap的sass源文件，则可以自定义这些断点。

https://v5.bootcss.com/docs/layout/breakpoints/

每个断点都被选择来舒适地容纳宽度是12的倍数的容器。断点也代表了一组常见的设备尺寸和视口维度——它们并不特定针对每一个用例或设备。相反，这些范围为几乎任何设备提供了一个强大且一致的基础。

这些断点可以通过 Sass 变量来自定义（你可以在 _variables.scss 文件中找到它们）：

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

媒体查询

由于bootstrap是针对移动设备优先开发的，bootstrap使用了一些媒体查询来为布局和界面创建合理的断点。这些断点主要基于最小视口宽度，并允许我们在视口变化时放大元素。

• 最小宽度
• 最大宽度
• 单个断点
• 断点之间