Breakpoints断点

Core concepts核心概念

• Breakpoints are the building blocks of responsive design.断点是响应性设计的构建块。 Use them to control when your layout can be adapted at a particular viewport or device size.使用它们可以控制何时可以在特定视口或设备大小下调整布局。

• Use media queries to architect your CSS by breakpoint.使用媒体查询通过断点构建CSS。 Media queries are a feature of CSS that allow you to conditionally apply styles based on a set of browser and operating system parameters. 媒体查询是CSS的一项功能，允许您根据一组浏览器和操作系统参数有条件地应用样式。We most commonly use min-width in our media queries.我们在媒体查询中最常用的是min-width。

• Mobile first, responsive design is the goal.移动优先，响应性设计是目标。 Bootstrap’s CSS aims to apply the bare minimum of styles to make a layout work at the smallest breakpoint, and then layers on styles to adjust that design for larger devices. Bootstrap的CSS旨在应用最简单的样式，使布局在最小的断点处工作，然后在样式上分层，以调整较大设备的设计。This optimizes your CSS, improves rendering time, and provides a great experience for your visitors.这将优化CSS，缩短渲染时间，并为访问者提供良好的体验。

Available breakpoints可用断点

Bootstrap includes six default breakpoints, sometimes referred to as grid tiers, for building responsively. Bootstrap包括六个默认断点，有时称为网格层，用于响应性地构建。These breakpoints can be customized if you’re using our source Sass files.如果您使用的是我们的源Sass文件，则可以自定义这些断点。

Each breakpoint was chosen to comfortably hold containers whose widths are multiples of 12. 选择每个断点是为了舒适地容纳宽度为12倍的容器。Breakpoints are also representative of a subset of common device sizes and viewport dimensions—they don’t specifically target every use case or device. 断点还代表了常见设备大小和视口尺寸的子集，它们并不专门针对每个用例或设备。Instead, the ranges provide a strong and consistent foundation to build on for nearly any device.相反，这些范围为几乎任何设备提供了坚固和一致的基础。

These breakpoints are customizable via Sass—you’ll find them in a Sass map in our _variables.scss stylesheet.这些断点可以通过Sass自定义。您可以在_variables.scss样式表中的Sass映射中找到它们。

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

For more information and examples on how to modify our Sass maps and variables, please refer to the Sass section of the Grid documentation.有关如何修改Sass映射和变量的更多信息和示例，请参阅网格文档的Sass部分。

Media queries媒体查询

Since Bootstrap is developed to be mobile first, we use a handful of media queries to create sensible breakpoints for our layouts and interfaces. 由于Bootstrap是首先开发为移动的，所以我们使用少量的媒体查询为布局和接口创建合理的断点。These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.这些断点主要基于最小视口宽度，允许我们在视口更改时放大元素。

Min-width

Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.Bootstrap主要在源Sass文件中为布局、网格系统和组件使用以下媒体查询范围或断点。

// Source mixins

// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
@include media-breakpoint-up(xxl) { ... }
// Usage

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
display: none;
}
@include media-breakpoint-up(sm) {
.custom-class {
display: block;
}
}

These Sass mixins translate in our compiled CSS using the values declared in our Sass variables. 这些Sass mixin使用Sass变量中声明的值在编译的CSS中进行转换。For example:例如：

// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

Max-width

We occasionally use media queries that go in the other direction (the given screen size or smaller):我们偶尔会使用另一个方向的媒体查询（给定的屏幕大小或更小）：

// No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) { ... }`
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
@include media-breakpoint-down(xxl) { ... }
// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
.custom-class {
display: block;
}
}

These mixins take those declared breakpoints, subtract .02px from them, and use them as our max-width values. 这些mixin获取那些声明的断点，从中减去.02px，并将它们用作我们的最大宽度值。For example:例如：

// `xs` returns only a ruleset and no media query
// ... { ... }

// `sm` applies to x-small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// `md` applies to small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }
// `lg` applies to medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }
// `xl` applies to large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }
// `xxl` applies to x-large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }

Single breakpoint单断点

There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.还有媒体查询和混音，用于使用最小和最大断点宽度来确定单个屏幕尺寸段的目标。

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }
@include media-breakpoint-only(xxl) { ... }

For example the @include media-breakpoint-only(md) { ... } will result in :例如@include media-breakpoint-only(md) { ... }将导致：

@media (min-width: 768px) and (max-width: 991.98px) { ... }

Between breakpoints断点之间

Similarly, media queries may span multiple breakpoint widths:类似地，媒体查询可能跨越多个断点宽度：

@include media-breakpoint-between(md, xl) { ... }

Which results in:其结果是：

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }