Точки останова — это настраиваемая ширина, которая определяет, как ваш адаптивный макет ведет себя на разных устройствах или размерах области просмотра.

Основные концепции:

  • Точки останова — это строительные блоки адаптивного дизайна. Используйте их, чтобы контролировать, когда ваш макет может быть адаптирован для определенного окна просмотра или размера устройства.
  • Используйте медиа-запросы для построения CSS с помощью точки останова. Медиа-запросы — это функция CSS, позволяющая условно применять стили на основе набора параметров браузера и операционной системы. Чаще всего мы используем min-width в наших медиа-запросах.
  • Сначала мобильные устройства, адаптивный дизайн — это наша цель. CSS Bootstrap направлен на применение минимального количества стилей, чтобы макет работал с минимальной точкой останова, а затем наложение стилей, чтобы настроить этот дизайн для больших устройств. Это оптимизирует ваш CSS, сокращает время рендеринга и обеспечивает отличный опыт для ваших посетителей.

Доступные точки останова

Включает шесть контрольных точек по умолчанию, иногда называемых уровнями сетки, для оперативного построения. Эти точки останова можно настроить, если вы используете наши исходные файлы Sass.

BreakpointClass infixDimensionsОчень маленькийНет‹576pxSmallsm≥576pxMediummd≥768pxLargelg≥992pxОчень большойxl≥1200pxОчень очень большойxxl≥1400px

Каждая точка останова была выбрана для удобного хранения контейнеров, ширина которых кратна 12. Точки останова также представляют подмножество общих размеров устройств и размеров области просмотра — они не предназначены специально для каждого варианта использования или устройства. Вместо этого диапазоны обеспечивают прочную и последовательную основу для практически любого устройства.

Эти контрольные точки настраиваются с помощью Sass — вы найдете их на карте Sass в нашей таблице стилей _variables.scss.

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

Для получения дополнительной информации и примеров того, как изменить наши карты и переменные Sass, обратитесь к разделу Sass документации Grid.

Медиа-запросы

Поскольку Bootstrap был разработан в первую очередь для мобильных устройств, мы используем несколько медиа-запросов для создания разумных точек останова для наших макетов и интерфейсов. Эти контрольные точки в основном основаны на минимальной ширине области просмотра и позволяют нам масштабировать элементы по мере изменения области просмотра.

Минимальная ширина

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;
  }
}

Эти миксины Sass транслируются в наш скомпилированный CSS с использованием значений, объявленных в наших переменных Sass. Например:

// 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) { ... }

Максимальная ширина

Мы иногда используем медиа-запросы, которые идут в другом направлении (данный размер экрана или меньше):

// 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;
  }
}

Эти примеси берут эти объявленные точки останова, вычитают из них .02px и используют их как наши значения max-width. Например:

// `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) { ... }

Зачем вычитать 0,02 пикселя? В настоящее время браузеры не поддерживают контекстные запросы диапазона, поэтому мы работаем над ограничениями префиксов min- и max- и областей просмотра с дробной шириной (которые могут возникать при определенных условиях на устройства с высоким разрешением, например), используя значения с более высокой точностью.

Одна точка останова

Существуют также медиа-запросы и примеси для таргетинга на один сегмент размеров экрана с использованием минимальной и максимальной ширины точки останова.

@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) { ... }

Например, @include media-breakpoint-only(md) { ... } приведет к:

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

Между точками останова

Точно так же медиа-запросы могут охватывать несколько точек останова по ширине:

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

Что приводит к:

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