Контрольные точки

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

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

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

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

Доступные контрольные точки

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

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

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

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

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

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

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

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

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

// Исходные миксины

// Нет необходимости в медиа-запросе для контрольной точки xs, так как это эффективно `@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) { ... }

// Применение

// Пример: Скрыть начало с `min-width: 0`, а затем показать в контрольной точке `sm`
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

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

// Устройства X-Small (портретные телефоны, менее 576 пикселей)
// Нет медиа-запроса для `xs`, так как это значение по умолчанию в Bootstrap

// Устройства Small (телефоны с горизонтальной ориентацией, 576 пикселей и выше)
@media (min-width: 576px) { ... }

// Устройства Medium (планшеты, 768 пикселей и выше)
@media (min-width: 768px) { ... }

// Устройства Large (настольные компьютеры, 992 пикселей и выше)
@media (min-width: 992px) { ... }

// Устройства X-Large (большие настольные компьютеры, 1200 пикселей и выше)
@media (min-width: 1200px) { ... }

// Устройства XX-Large (большие настольные компьютеры, 1400 пикселей и выше)
@media (min-width: 1400px) { ... }

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

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

// Для контрольной точки xs не требуется медиа-запрос, поскольку он фактически `@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) { ... }

// Пример: стиль от средней контрольной точки и ниже
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

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

// `xs` возвращает только набор правил, но не медиа-запрос
// ... { ... }

// `sm` применяется к устройствам x-small (портретные телефоны, менее 576 пикселей)
@media (max-width: 575.98px) { ... }

// `md` применяется к небольшим устройствам medium (телефоны с горизонтальной ориентацией, менее 768 пикселей)
@media (max-width: 767.98px) { ... }

// `lg` применяется к устройствам среднего размера large (планшеты, менее 992 пикселей)
@media (max-width: 991.98px) { ... }

// `xl` применяется к большим устройствам (настольные компьютеры, менее 1200 пикселей)
@media (max-width: 1199.98px) { ... }

// `xxl` применяется к устройствам x-large (большие рабочие столы, менее 1400 пикселей)
@media (max-width: 1399.98px) { ... }

Одиночная контрольная точка

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

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