Bootstrap Breakpoints (Контрольные точки)

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

• Контрольные точки - это строительные блоки адаптивного дизайна. Используйте их, чтобы контролировать, когда ваш макет может быть адаптирован к определенному окну просмотра или размеру устройства.

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

• Прежде всего, мобильные устройства, наша цель - адаптивный дизайн. CSS Bootstrap нацелен на применение минимума стилей, чтобы макет работал с наименьшей точкой останова, а затем наложение стилей для настройки этого дизайна для более крупных устройств. Это оптимизирует ваш CSS, сокращает время рендеринга и обеспечивает отличный опыт для ваших посетителей.

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

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

Размер каждой точки останова был выбран кратным 12 и представляющим подмножество общих размеров устройств и размеров области просмотра. Они специально не нацелены на все варианты использования или устройства, но предлагаемые диапазоны обеспечивают прочную и последовательную основу для построения любого почти устройства.

Эти точки останова можно настраивать через Sass - вы найдете их на карте Sass в нашей _variables.scss таблице стилей.

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

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

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

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

Min-width

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

Max-width

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

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

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

// Пример
// Применяем стили, начиная со средних устройств и заканчивая очень большими устройствами
@media (min-width: 768px) and (max-width: 1199.98px) {  ... }