Что такое брейкпоинт в верстке
Перейти к содержимому

Что такое брейкпоинт в верстке

  • автор:

Breakpoints какие нужны?

Здравствуйте.
Сейчас дошел до последнего пункта в респонзив дизайне, а именно к медиа запросам, и появилось пару вопросов по этому поводу.
1. Как все же правильно определять эти самые брейкпоинты для медия запросов? Нужно изменять окно браузера ( как быстрый вариант ) и на каждом моменте где что-то съехало, наехало, сломалось — делать брейпоинт и в медия запросах править это? Или же есть какие-то общепринятые брейкпоинты по которым все подгоняется ( 1280 px или припустим 768 px ) и не важно что там будет на пиксель меньше? Если есть — это какие?
2. В самих медия запросах нужно использовать px или дальше % + em ( ведь верста была адаптивной и весь сайт написан в % и em ) или в медиа запросах это не имеет значение?

  • Вопрос задан более трёх лет назад
  • 38090 просмотров

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

Контрольные точки (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)  . > 

Брейкпоинт (breakpoint)

Брейкпоинт, или контрольная точка (от англ. breakpoint) — это термин, который может иметь различные значения в зависимости от контекста. В общем смысле он обозначает точку или ситуацию, в которой что-то меняется или останавливается. Две основные области применения понятия — это дизайн и программирование. Рассмотрим, что такое брейкпоинт в этих сферах.

Вступайте в клуб начинающих дизайнеров и получайте подарки

Содержание

  1. Брейкпоинты в дизайне
  2. Брейкпоинты в программировании

Брейкпоинты в дизайне

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

Брейкпоинты обычно задаются в CSS — языке, который управляет внешним видом веб-сайтов и приложений. В CSS разработчик использует медиазапросы — код-правило, включающее те или иные стили отображения контента в зависимости от определенных условий, например ширины области просмотра.

Вот пример медиазапроса:

Этот код означает, что стили, заключенные в фигурные скобки, будут применяться только к экранам шириной не менее 768 пикселей. 768 — это брейкпоинт, обозначающий границу работы тех или иных стилей. С помощью медиазапросов разработчики и дизайнеры могут создавать различные дизайны для экранов разных размеров, используя один и тот же HTML-код.

какая профессия
в дизайне вам подойдет?

Ответьте на 10 вопросов и узнайте, какая дизайн-специальность вам подходит

Пройти тест

Bootstrap

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

  • X-Small — ширина менее 576 пикселей;
  • Small — не менее 576 пикселей;
  • Medium — не менее 768 пикселей;
  • Large — не менее 992 пикселей;
  • Extra large — не менее 1200 пикселей;
  • Extra extra large — не менее 1400 пикселей.

Визуально эти брейкпоинты представляют в формате сетки — разделения экрана с контентом на столбцы и строки, используемые для выравнивания и позиционирования элементов. По сетке дизайнеры создают все компоненты макета: баннеры, кнопки, навигационные панели, блоки текста, карточки и т.д.

Визуально сетка bootstrap выглядит как поле из 12 колонок одинаковой ширины с небольшим отступом между ними.

Сетка bootstrap для десктопа в Figma

Но ведь знакомые нам сайты и приложения не разделены на 12 частей, верно? Да, потому что для создания того или иного дизайн-элемента можно комбинировать любое число колонок — например 2, 4, 6 или даже все 12 для больших баннеров или текста.

Комбинирование колонок

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

Минимальная и максимальная ширина в медиазапросах

Выше мы показали, как используется минимальная ширина в медиазапросах. Грубо говоря, она обозначает ту границу ширины экрана, после преодоления которой на сайте будет отображаться уже немного другой макет («конкретная ширина или больше»).

Однако часто применяется и максимальная ширина — это конкретный размер экрана или меньше. Указание той или иной ширины, по большому счету, является вопросом удобства для верстальщика и особенностей конкретного макета.

Максимальная ширина задается запросом вида:

Откуда здесь взялась десятичная дробь и как число 575.98 соотносится с шириной 576 пикселей? Все дело в том, что при написании кода было решено вычитать из значения брейкпоинта 0.02 px, чтобы стили отображались в браузерах более точно из-за определенных технических ограничений. То есть подобное дробное написание актуально только при использовании в коде максимальной ширины.

Брейкпоинты в программировании

В сфере написания кода тоже есть понятие брейкпоинта (по-русски его часто переводят как точка останова). Оно не имеет здесь никакого отношения к верстке или ширине экранов и обозначает в буквальном смысле место, где выполнение программы останавливается, чтобы программист мог детально изучить нужный фрагмент кода. Причем breakpoint в программировании тесно связан с таким явлением, как среда разработки и отладчик. Это специальная программа, которая помогает писать код: использовать корректный синтаксис, исправлять ошибки, сокращать код, грамотно его структурировать. Брейкпоинт здесь выглядит обычно как красная точка напротив какой-либо строки кода. Программа, запущенная в отладчике, остановится на строчке с красной точкой и покажет состояние исполнения программы на текущий момент.

Брейкпоинт в ведущей среде разработки на языках Java и Kotlin IntelliJ IDEA

Брейкпоинты в программировании — незаменимое средство для написания корректного кода и правильно работающих программ.

Другие термины на букву «Б»

100% правильный способ делать адаптивные брейкпоинты в CSS

От автора: сейчас я попрошу вас забыть о CSS, веб-разработке и цифровых интерфейсах на некоторое время. И вот когда вы все забыли, хочу предложить отправиться вам в мысленное путешествие назад во времени. Туда, где вы были еще маленьким, ваш первый день в школе. Тогда все было проще, вы рисовали каракули и старались усидеть на месте.

100% правильный способ делать адаптивные брейкпоинты в CSS

Посмотрите на точки сверху. Некоторые из них слипаются, а другие расположены друг от друга на расстоянии, видите? Я хочу, чтобы вы разбили их на 5 групп так, как вы считаете нужным.

Давайте. Убедитесь, что никто не смотрит, и нарисуйте пять кружков своими детскими пальчиками.

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

100% правильный способ делать адаптивные брейкпоинты в CSS

Крайние справа две точки можно было бы объединить и по-другому. Если вы обвели их вместе, ничего страшного. Говорят, что тут не существует неправильного ответа.

Прежде чем я продолжу, хочу спросить, не пробовали ли вы обвести точки так?

100% правильный способ делать адаптивные брейкпоинты в CSS

Скорее всего, нет, правильно?

Но именно это и нужно было бы сделать, если бы вам нужно было задать брейкпоинты в местах, совпадающих с точной шириной экрана популярных устройств (320px, 768px, 1024px).

100% правильный способ делать адаптивные брейкпоинты в CSS

Слышали ли вы когда-нибудь или произносили цитату ниже? «Средний брейкпоинт доходит до 768px или включает 768? Так-так… это альбомный режим на iPad или large? Ой, large ведь это 768px и выше. Понятно. А small тогда 320px? Для кого тогда диапазон от 0 до 319px? Для насекомых?»

Я мог бы показать вам правильные брейкпоинты и все, но мне интересно, почему этот странный метод группировки получил такую популярность.

Почему размеры должны быть именно такими?

Я думаю, что ответ на этот вопрос, как и на многие другие проблемы, кроется в неправильном понимании терминологии. В конце концов, все мы знаем шутку про прилив в Гуантанамо. Звучит шикарно, если не знаешь, что это значит. (Жалко, что эту шутку придумал не я.) В тюрьме в Гуантанамо заключенных пытали, имитируя утопление приливом.

Мне кажется, мы смешиваем понятия границ и диапазонов, когда обсуждаем и создаем брейкпоинты.

Скажите, если вы делаете брейкпоинты в Sass, создавали ли вы переменную $large со значением 768px?

Это нижняя или верхняя граница, которую вы относите к large? Если нижняя, то у вас не должно быть $small, так как она должна быть равна 0, так ведь?

А если это верхняя граница, как бы вы задали переменную $large-and-up? Нужно создать медиа запрос с min-width равным $medium, правильно?

Если же вы, говоря о large, понимаете только границы, то вы запутаетесь, потому что медиа запросы это всегда диапазон.

Полный бардак, на который мы еще тратим время, чтобы понять все. Поэтому я предлагаю:

правильно определяйте брейкпоинты;

давайте диапазонам разумные названия;

Совет №1: правильно определяйте брейкпоинты

Так какие же брейкпоинты правильные? Вы уже нарисовали эти круги, представив себя маленькими. Я просто сделаю из них прямоугольники.

100% правильный способ делать адаптивные брейкпоинты в CSS

600px, 900px, 1200px и 1800px, если вы собираетесь сделать что-то особенное для пользователей с очень большими мониторами. Не по теме, если заказываете большой монитор онлайн, убедитесь, что он для компьютера. Вы же не хотите получить по почте гигантскую ящерицу.

Те точки, с которыми вы играли, когда были маленьким, на самом деле представляют собой 14 наиболее распространенных размеров экранов:

100% правильный способ делать адаптивные брейкпоинты в CSS

Можно создать довольно маленькую картину того, какие экраны используют бизнесмены, дизайнеры, разработчики и тестировщики.

100% правильный способ делать адаптивные брейкпоинты в CSS

Совет №2: давайте диапазонам разумные названия

Можно называть брейкпоинты papa-bear и baby-bear, если хотите. Но если я сяду с дизайнером обсудить внешний вид сайта на разных устройствах, я хочу, чтобы наш разговор закончился как можно быстрее. Если название portrait tablet поможет мне ускорить разговор, я буду рад. Да я даже простил, если бы вы назвали размер «iPad portrait».

Но альбомные размеры меняются! Можете закричать вы. Телефоны становятся все больше, а планшеты все меньше.

Срок годности CSS на сайте составляет в среднем 3 года (если это не Gmail). iPad удвоился за это время, и его до сих пор используют. Мы же знаем, что Apple больше не делает новых продуктов, они просто убирают что-то из существующих вещей (кнопки, отверстия и т.д.).

Ребят, 1024х768 никуда не денется. Давайте не будем прятать голову в песок. Забавный факт: страусы не обитают в городах, потому что там нет песка, некуда прятаться от хищников.

Заключение: связь очень важна. Не отрывайте себя целенаправленно от полезной лексики.

Совет №3: будьте декларативны

Знаю-знаю, «декларативны», это слово, опять. Скажу по-другому: ваш CSS должен определять то, что необходимо сделать, а не как это должно произойти. Слово «как» больше относится к каким-то мелочам в миксинах.

Как я уже говорил выше, путаницу вокруг брейкпоинтов отчасти вызывает то, что переменные, задающие границы диапазона, используются в качестве названия этого диапазона. $large: 600px –если large это диапазон, то такая запись не имеет смысла. То же самое, что сказать var coordinates = 4;.

Такие вещи можно прятать в миксины, а не оставлять в коде. Можно сделать еще лучше и вообще не использовать переменные.

Сначала я написал код ниже как упрощенный пример. Но на самом деле я думаю, что этот код охватывает все основные моменты. Можно посмотреть в действии на CodePen. Я использовал Sass, не могу представить себе разработку сайта без него. В CSS или LESS логика такая же.

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

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