Контрольные точки
Контрольные точки (Breakpoints) — это триггеры настраиваемой ширины, которые определяют поведение адаптивного макета Bootstrap в зависимости от размеров устройства или области просмотра.
На этой странице
Основные понятия
- Контрольные точки являются строительными блоками адаптивного дизайна. Используйте их по контролю макет для адаптиции под конкретный видовой экран или размер устройства.
- Используйте медиа-запросы для разработки вашего CSS по контрольным точкам. Медиа-запросы — это функция CSS, которая позволяет условно применять стили на основе набора параметров браузера и операционной системы. Мы чаще всего используем min-width в наших медиа-запросах.
- Mobile First — это метод разработки оптимизированного адаптивного вебсайта прежде всего для мобильных устройств. CSS Bootstrap нацелен на применение минимального количества стилей, чтобы макет работал с минимальной точкой останова, с последующим наложением слоев стилей для настройки дизайна для более крупных устройств. Это оптимизирует ваш CSS, улучшает время рендеринга и предоставляет отличные возможности для посеителей сайта.
Доступные контрольные точки
Bootstrap включает шесть контрольных точек по умолчанию, иногда называемых уровнями сетки, для быстрого реагирования. Эти контрольные точки можно настроить, если вы используете наши исходные файлы Sass.
Контрольные точки | Инфикс класса | Размеры | |
---|---|---|---|
X-Small | Нет | ||
Small | sm | ≥576px | |
Medium | md | ≥768px | |
Large | lg | ≥992px | |
Extra large | xl | ≥1200px | |
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) — это термин, который может иметь различные значения в зависимости от контекста. В общем смысле он обозначает точку или ситуацию, в которой что-то меняется или останавливается. Две основные области применения понятия — это дизайн и программирование. Рассмотрим, что такое брейкпоинт в этих сферах.
Пройдите тест из 10 вопросов и узнайте, какая дизайн-профессия подходит лично вам
Содержание
- Брейкпоинты в дизайне
- Брейкпоинты в программировании
Брейкпоинты в дизайне
Здесь 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 колонок одинаковой ширины с небольшим отступом между ними.
Но ведь знакомые нам сайты и приложения не разделены на 12 частей, верно? Да, потому что для создания того или иного дизайн-элемента можно комбинировать любое число колонок — например 2, 4, 6 или даже все 12 для больших баннеров или текста.
Bootstrap используется для того, чтобы разработчику было легче верстать дизайн-макет, чтобы он не выверял точное положение всех нарисованных элементов до пикселя, а просто ориентировался на их положение на сетке. С помощью сетки bootstrap дизайнер может сообщить разработчику, как сайт или приложение должны меняться на той или иной ширине экрана.
Минимальная и максимальная ширина в медиазапросах
Выше мы показали, как используется минимальная ширина в медиазапросах. Грубо говоря, она обозначает ту границу ширины экрана, после преодоления которой на сайте будет отображаться уже немного другой макет («конкретная ширина или больше»).
Однако часто применяется и максимальная ширина — это конкретный размер экрана или меньше. Указание той или иной ширины, по большому счету, является вопросом удобства для верстальщика и особенностей конкретного макета.
Максимальная ширина задается запросом вида:
Откуда здесь взялась десятичная дробь и как число 575.98 соотносится с шириной 576 пикселей? Все дело в том, что при написании кода было решено вычитать из значения брейкпоинта 0.02 px, чтобы стили отображались в браузерах более точно из-за определенных технических ограничений. То есть подобное дробное написание актуально только при использовании в коде максимальной ширины.
Брейкпоинты в программировании
В сфере написания кода тоже есть понятие брейкпоинта (по-русски его часто переводят как точка останова). Оно не имеет здесь никакого отношения к верстке или ширине экранов и обозначает в буквальном смысле место, где выполнение программы останавливается, чтобы программист мог детально изучить нужный фрагмент кода. Причем breakpoint в программировании тесно связан с таким явлением, как среда разработки и отладчик. Это специальная программа, которая помогает писать код: использовать корректный синтаксис, исправлять ошибки, сокращать код, грамотно его структурировать. Брейкпоинт здесь выглядит обычно как красная точка напротив какой-либо строки кода. Программа, запущенная в отладчике, остановится на строчке с красной точкой и покажет состояние исполнения программы на текущий момент.
Брейкпоинты в программировании — незаменимое средство для написания корректного кода и правильно работающих программ.
Другие термины на букву «Б»
100% правильный способ работы с брейкпоинтами
Давайте на следующие несколько минут забудем о CSS, веб-разработке и интерфейсах.
Если у вас получилось, я хочу, чтобы вы подключили воображение и вспомнили о прошлом — вернитесь в детство, в свой первый день в школе. Прекрасное время, когда самой большой проблемой было суметь нарисовать ровные фигурки или справиться с недержанием.
Взгляните на точки на рисунке выше. Заметили, что некоторые из них как будто образуют кучки, а некоторые расположены независимо от остальных? Всё, что я попрошу вас сейчас сделать — это объединить эти точки в несколько групп, как вам кажется правильным.
Теперь дальше. Убедившись, что никто не подглядывает за вами, обведите каждую из этих групп кружочком— прямо пальцем, как в младшей школе.
Скорее всего, у вас получится что-то, похожее на картинку ниже. (В любом случае, что бы ни получилось, не говорите мне, что вы просто проскроллили, даже не попытавшись — это просто фейспалм).
Конечно, две крайние точки справа весьма спорные, так что я соглашусь с вами, даже если вы сгруппировали их отдельно. Говорят, здесь даже нет неправильного ответа, но я никогда не бывал на стороне отвечающего, чтобы проверить и утверждать, что это действительно так.
Но, прежде чем мы продолжим — возможно, кто-то из вас всё-таки нарисовал что-то подобное?
Скорее всего нет, правда?
Но ведь это как раз таки то, что получается, когда вы выставляете брейкпоинты в своём проекте в соответствии с шириной экранов самых распространённых девайсов (320px, 768px, 1024px).
Приходилось ли вам когда-нибудь слышать или говорить что-то подобное:
Хм, а брейкпоинт “medium” подразумевает 768px, включая или не включая это значение? А пейзажная ориентация iPad — это тогда “large”? А, кажется “large” — это 768px и шире. Окей, с этим разобрались. А “small” — это 320px? Но что тогда использовать для промежутка от 0px до 319px? Назвать брейкпоинт “муравьиным”?
Я мог бы просто показать вам правильные значения для брейкпоинтов и закончить статью на этом. Но мне крайне интересно разобраться, почему метод такой странной группировки настолько широко распространён?
Почему это должно быть именно так?
Мне кажется, ответ на это вопрос, как и всегда, кроется в неправильно подобранной терминологии. К слову, “аквапарк на побережье Гуантанамо” звучит просто прекрасно ровно до тех пор, пока вы не узнаете, что значит эта фраза. (Боже, почему не я придумал эту шутку).
Мне кажется, мы путаем понятия интервалов и их границ как в повседневной речи, так и при определении брейкпоинтов.
Признайтесь, если вы пишете на Sass, наверняка же у вас есть переменная, скажем, $large со значением 768px ?
А это верхняя граница меньшего интервала или нижняя граница большего? И если это, допустим, верхняя граница, тогда мы вряд ли сможем определить $small , ведь ему придётся быть нулём.
А если это нижняя граница, тогда как вы определите брейкпоинт $large-and-up ? Получается, медиа-выражением с min-width равной $medium , так?
В любом случае, если вы имеете в виду только одну границу, говоря о брейкпоинте, вы ошибаетесь, поскольку медиа-запрос — это всегда интервал.
Вообще, вся эта ситуация выглядит как большая путаница, так что мы только теряем время, бесцельно размышляя об этом. Однако, у меня есть 3 полезных совета:
- Правильно определяйте границы интервалов (сами брейкпоинты)
- Правильно называйте сами интервалы
- Будьте декларативными
Совет 1: правильно определяйте брейкпоинты
Но что считать правильными брейкпоинтами?
Ваш внутренний ребёнок уже нарисовал несколько кружочков на шкале — я всего лишь превращу их в интервалы.
600px, 900px, 1200px, и 1800px, если интерфейс будет меняться на устройствах с огромными мониторами. Кстати, если вы покупаете огромный монитор онлайн — проверьте, что он может использоваться с ПК, чтобы не получить внезапный сюрприз при доставке.
Те самые группированные точки из вашего “школьного прошлого” как раз соответствуют 14 самым распространённым размерам экранов:
Соответственно, можно составить небольшую диаграммку, чтобы убеждать всяких “серьёзных людей” вроде менеджеров, дизайнеров, других разработчиков и тестировщиков стало немного проще.
Совет 2: правильно называйте интервалы
Конечно, вы можете назвать свои брейкпоинты как захотите, хоть papa-bear и baby-bear. Но если я приду к дизайнеру, чтобы обсудить, как выглядит сайт на том или ином разрешении экрана — я явно захочу поскорее закончить этот разговор. Если термин portrait tablet подходит для понимания обеими сторонами — отлично, я справился. Чёрт возьми, я даже готов смириться с iPad portrait в крайнем случае.
Вероятнее всего, здесь вы возразите мне, что “размеры экрана меняются! Телефоны становятся больше! Планшеты становятся меньше!”
Но срок годности CSS на вашем сайте — примерно 3 года (если только вы не Gmail, конечно). iPad, к примеру, всё это время был с нами и нам ещё придётся побороться за его отставку. Да и, насколько мы знаем, Apple больше не делает новых продуктов — они просто убирают разные элементы из старых (кнопки, разъёмы — вот это всё).
Так что, 1024 x 768 пока остаётся с нами, ребят, как бы мы ни пытались от этого спрятаться. (Кстати, забавный факт: думаю, страусы не живут в городах именно потому, что им негде прятаться — в городах нет песка, в который можно сунуть голову, завидев хищника.)
В заключение: коммуникация — это важно. Не стоит целенаправленно лишать себя возможности использовать удобные и понятные для всех термины.
Совет 3: будьте декларативны
Да-да, знаю, снова какая-то непонятная “декларативность”. Попробую зайти с другой стороны: ваш CSS должен говорить о том, что произойдёт, а не как это произойдёт. “Как” стоит вообще спрятать в какой-нибудь миксин.
Как мы уже поняли, главная путаница в брейкпоинтах возникает потому, что переменные, обозначающие границу (как одно значение), мы используем для обозначения целого интервала. Переменная $large: 600px не имеет абсолютно никакого смысла, потому что large — множество значений. Это то же самое, как определить переменную var coordinates = 4; .
Таким образом, мы можем спрятать всё лишнее в миксины и не захламлять отдельными значениями код. Или пойти ещё дальше и вовсе не использовать переменные.
Для начала, посмотрим на небольшой сниппет, который я написал в качестве простого примера.
- Если вам нужно проверить, как выглядит сайт на экранах больше вашего — используйте responsive mode в Chrome DevTools — там можно выбрать любой размер экрана.
- Синяя полоса в верхней части экрана означает медиа-запросы со значением “max-width”, оранжевая — “min-width”, зелёная — и max, и min.
- Клик по @media-запросу установит ширину экрана на ту, которая использована в нём. Последовательные клики по зелёному @media-запросу будут переключать между max- и min-значениями.
- Правый клик по @media-запросу на панели откроет определение этого правила в CSS.
Хей, спасибо, что прочли! Если у вас появятся какие-то идеи — пишите в комментарии, буду рад увидеть их (оригинал статьи по ссылке — прим. пер.). И кликните на сердечко, если считаете, что этот лайк будет заслуженным. А если вы так не считаете — просто оставьте его пустым и униженным, каковой окажется моя самооценка в таком случае.
Это всего лишь вторая переведённая мной статья, и мне хочется делать переводы лучше и лучше. Если вам есть, что сказать по поводу ошибок, неточностей или опечаток, предложить идеи статей для перевода или вас просто вдохновили сурикаты с последней картинки — пишите комментарии, я действительно читаю их, даже (особенно) если они про сурикатов:)
Список популярных медиазапросов
Очень часто при создании сайтов при верстке адаптивных макетов приходится под рукой всегда иметь список быстродоступных правил (т.н. медиа-запросов) для стандартного набора расширений экранов мониторов. Для каждой контрольной точки (breakpoint) можно задать свои css-правила, на основании которых для того или иного разрешения будут применяться индивидуальные стили.
Этот список приведен ниже, пользуйтесь на здоровье!
@media only screen and (max-width : 1920px) < /* CSS правила */ >@media only screen and (max-width : 1680px) <> @media only screen and (max-width : 1366px) <> @media only screen and (max-width : 1280px) <> @media only screen and (max-width : 1024px) <> @media only screen and (max-width : 800px) <> @media only screen and (max-width : 768px) <> @media only screen and (max-width : 600px) <> @media only screen and (max-width : 533px) <> @media only screen and (max-width : 360px) <> @media only screen and (max-width : 320px) <> @media only screen and (max-width : 240px) <> @media only screen and (max-width : 176px) <>
Также с помощью определенных правил css можно распознавать альбомное или портретное расположение экрана в случае, если сайт просматривается с планшета или смартфона:
@media all and (orientation: landscape) < /* CSS правила для устройства в альбомном режиме */ >@media all and (orientation: portrait) < /* CSS правила для устройства в портретном режиме */ >
И напоследок: кто не знает как работает адаптивный шаблон, то на примере страницы Google можно увидеть ее работу. Для этого уменьшайте размер окна браузера и следите за тем как меняются положения блоков, исчезают изображения, во что превращается меню по мере уменьшения окна браузера.
Можно сочетать резиновость сайта с медиазапросами, делая его при этом резиновым в определенных пределах окна, а переходя на более низкие разрешения изменять поведение страницы сайта на какое-либо другое. Это позволяет увеличить еще больше эффективность отображения информации и оптимизируя сайт таким образом позволяет привлечь и удерживать на нем еще больше посетителей.