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

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

  • автор:

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

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

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

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

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

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

Каталог курсов

Направления обучения

Бесплатный курс

начало карьеры

IT-профессии

Как выбрать направление и реализовать себя

Breakpoints (контрольная точка)

Breakpoints (переломные/контрольные точки) — изменение условий с одного на другое, при котором внешний вид сайта (раскладка) изменяется. Часто встречается в адаптивной вёрстке с использованием медиавыражений.

Или запишитесь на наши бесплатные занятия по теме дизайна и UX.

Список популярных медиазапросов

Очень часто при создании сайтов при верстке адаптивных макетов приходится под рукой всегда иметь список быстродоступных правил (т.н. медиа-запросов) для стандартного набора расширений экранов мониторов. Для каждой контрольной точки (breakpoint) можно задать свои css-правила, на основании которых для того или иного разрешения будут применяться индивидуальные стили.

adapt

Этот список приведен ниже, пользуйтесь на здоровье!

@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 можно увидеть ее работу. Для этого уменьшайте размер окна браузера и следите за тем как меняются положения блоков, исчезают изображения, во что превращается меню по мере уменьшения окна браузера.

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

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

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