Брейкпоинт что это
Перейти к содержимому

Брейкпоинт что это

  • автор:

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

Контрольные точки (Breakpoints) — это триггеры настраиваемой ширины, которые определяют поведение адаптивного макета Bootstrap в зависимости от размеров устройства или области просмотра.

На этой странице

Основные понятия

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

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

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

Контрольные точки Инфикс класса Размеры
X-Small X-Small Нет
Small Small sm ≥576px
Medium Medium md ≥768px
Large Large lg ≥992px
Extra large Extra large xl ≥1200px
Extra extra large Extra extra large xxl ≥1400px

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

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

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

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

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

Поскольку 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 . Например:

// Устройства X-Small (портретные телефоны, менее 576 пикселей) @media (max-width: 575.98px)  . > // Устройства Small (телефоны с горизонтальной ориентацией, менее 768 пикселей) @media (max-width: 767.98px)  . > // Устройства Medium (планшеты, менее 992 пикселей) @media (max-width: 991.98px)  . > // Устройства Large (настольные компьютеры, менее 1200 пикселей) @media (max-width: 1199.98px)  . > // Устройства X-Large (большие настольные компьютеры, менее 1400 пикселей) @media (max-width: 1399.98px)  . > // Устройства XX-Large (большие настольные компьютеры) // Нет медиа-запроса, так как контрольная точка xxl не имеет верхней границы ширины 

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

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *