Гибкая сетка

Гибкие сетки

При использовании макетных сеток для создания полноразмерных макетов может быть целесообразно применять принципы адаптивного веб-дизайна (RWD), чтобы макет адаптировался к различным ширинам экрана.

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

Создание адаптивных сеток

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

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

Однако в случае сеток мы можем использовать max-width медиазапрос, чтобы применять стили выстроенной в стопку сетки только ниже точки останова ширины. Это позволяет использовать все стандартные стили сетки, но просто корректировать их при узких ширинах.

Без пользовательских стилей наша сетка будет иметь 3 колонки на всех ширинах экрана:

В пользовательских стилях мы хотим, чтобы эта сетка выстраивалась в стопку при узких ширинах, а затем переключалась на стандартный макет с 3 колонками. На очень широких экранах мы хотим, чтобы первая колонка занимала 50% ширины, как показано ниже:

Чтобы сделать это адаптивным, начните с добавления класса my-breakpoint к контейнеру сетки, который ссылается на пользовательскую точку останова в вашем пользовательском стиле:

<div class="ui-grid-b my-breakpoint">
  <div class="ui-block-a">Block A</div>
  <div class="ui-block-b">Block B</div>
  <div class="ui-block-c">Block C</div>
</div><!-- /grid-b -->

Добавление точки останова выстраивания в стопку при узких ширинах

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

В ваших медиазапросах используйте единицы em вместо пикселей, чтобы медиазапрос учитывал размер шрифта помимо ширины экрана. Для вычисления ширины экрана в единицах em разделите целевую ширину в пикселях на 16, что является стандартным размером шрифта тела.

@media all and (max-width: 50em) {
  .my-breakpoint .ui-block-a,
  .my-breakpoint .ui-block-b,
  .my-breakpoint .ui-block-c,
  .my-breakpoint .ui-block-d,
  .my-breakpoint .ui-block-e {
    width: 100%;
    float:none;
  }
}

В этом медиазапросе мы устанавливаем ширину в 100% и отменяем свойство float, чтобы блоки сетки выстраивались в стопку ниже ширины 50em. Эти правила применяются ко всем типам сеток путем объединения селекторов для всех классов сеток от ui-block-a до ui-block-e в стилях.

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

Добавление точки останова для широких экранов для изменения соотношений

Продолжая пример выше, мы можем добавить дополнительную точку останова, чтобы изменить ширины, чтобы первая колонка занимала 50% ширины, а две другие — по 25% выше 75em (1200 пикселей), добавив дополнительный min-width медиазапрос для изменения ширин в нашем пользовательском стиле, как показано ниже:

@media all and (min-width: 75em) {
  .my-breakpoint.ui-grid-b .ui-block-a { width: 49.95%; }
  .my-breakpoint.ui-grid-b .ui-block-b,
  .my-breakpoint.ui-grid-b .ui-block-c { width: 24.925%; }
  .my-breakpoint.ui-grid-b .ui-block-a { clear: left; }
  }
}

Обратите внимание на немного меньшие ширины, установленные для решения проблем с округлением на разных платформах.

Применение готовой точки останова

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

Чтобы использовать эту предварительно настроенную точку останова, добавьте класс ui-responsive к контейнеру сетки, чтобы применить выстраивание в стопку ниже 560px (35em). Если эта точка останова не подходит для вашего контента, мы рекомендуем создать пользовательскую точку останова, как описано выше.

<div class="ui-grid-b ui-responsive">

Это стандартные сетки, которые сделаны адаптивными с помощью ui-responsive класса для контейнера сетки:

Сетка A (50/50)

Сетка B (33/33/33)

Сетка C (25/25/25/25)

Сетка D (20/20/20/20/20)