Адаптивный дизайн

Автор: David Bachmann    Источник: css-tricks.com
28.04.2017
927
0
img

При использовании медиа запросов CSS значения изменяются очень резко. Комбинируя функцию calc() и единицы вьюпорта, такие как vw и vh, мы можем добиться более плавного результата. Для этого мы будем использовать технику, которая называется линейная интерполяция.

Линейная интерполяция – это формула, которая используется для поиска значения между двумя точками на линии. В нашем случае две точки – это CSS значения, например, размеры шрифта, отступы или ширина, между которыми нужно найти значения соответствующие ширине экрана.

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

Сниппет ниже – это Sass функция на основе линейной интерполяции, которую мы назвали between.

@function between($to, $from, $toWidth, $fromWidth) {
  $slope: ($to - $from) / ($toWidth - $fromWidth);
  $base: $from - $slope * $fromWidth;

  @return calc(#{$base} + #{100vw * $slope});
}

Функция используется так:

$small: 400px; 
$large: 1000px;

.Container {
  /* The base (smallest) value. */
  padding: 20px;

  /* In $small it should be 20px and in $large it should be 100px,  */
  /* In viewports between that its padding should be calculated */
  @media (min-width: $small) {
    padding: between(20px, 100px, $small, $large);
  }

/* In $large we cap the value at 100px */
  @media (min-width: $large) {
    padding: 100px;
  }
}

Код выше демонстрирует, как найти значение для внутреннего отступа контейнера в диапазоне от 20px для «мобильного» размера до 100px для «настольного» размера. То есть для экрана любого размера это значение будет рассчитываться в диапазоне от 20 до 100 пикселей. Чтобы избежать значений превышающих максимальное, ставим ограничение с помощью контрольной точки.

Попробуйте изменить размер демо, чтобы увидеть, как это работает:

Функция between отлично решает проблему с отступами. Проблему, которую раньше мы должны были решать вручную, используя кучу медиа запросов.

Примеры

Талантливая Карли Сильвестр одолжила мне макеты, которые она сделала для сайта пожарной службы, чтобы я смог продемонстрировать эту технику в действии.

Макет состоит из настольной, планшетной и мобильной версии сайта шириной 1440px, 720px и 324px соответственно. На самом деле разница между этими устройствами не очень большая, поэтому мы будем использовать значения ширины как целевые точки для функции интерполяции. Настольная и планшетная версия очень похожи между собой за исключением количества свободного пространства и размеров шрифтов, между которыми мы можем найти плавный переход. А когда дойдем до наименьшей контрольной точки, то переключимся на классический полноэкранный мобильный макет.

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

Комбинация с rem

Эту технику можно улучшить, используя в стилях единицы rem:

Единица rem ссылается на корневой размер шрифта (размер шрифта установленный для элемента :root или html), чтобы определить свое значение, а корневой размер шрифта в свою очередь зависит от ширины вьюпорта. Мы задаем корневой размер шрифта 10px как самый маленький и 18px как самый большой и в результате получаем плавный переход между этими двумя значениями. В результате в самой «маленькой» контрольной точке ширина карточки получается 245px, и она плавно растет, пока не достигает своего пика, 440px, в самой «большой» контрольной точке.

Заключение

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

Что касается поддержки браузеров – тот факт, что для работы с этой техникой нам нужна только функция calc() и единица vw, играет нам на руку. В Европе и США поддержка равна примерно 97%, а глобально – около 84%.

Например, в приведенных выше примерах неподдерживаемые браузеры (в основном это Opera Mini и UC) в зависимости от ширины экрана будут использовать самые низкие (базовые) или самые высокие (ограниченные) значения.

ПОХОЖИЕ СТАТЬИ: