Сила единиц viewport’a

Автор: Thomas Lattimore    Источник: lullabot.com
02.03.2017
530
0
img

Дни дизайна фиксированной ширины, который нужно тестировать всего лишь на нескольких размерах viewport’a давно прошли. Мы живем в мире изменяющейся ширины с множеством устройств разных размеров и разным соотношением сторон. Проценты дают много способов настроить то, как будет выглядеть контент, но они подходят не во всех случаях. Процентные единицы viewport’a или «единицы viewport’a», если кратко, предлагают альтернативные «гибкие» значения на тот случай, кода проценты оказываются бесполезными. К примеру, единицы viewport’a могут быть полезны, если нужно создать элементы такого же размера как viewport.

Единицы viewport’a устанавливают размеры элементов относительно размеров экрана, а проценты относительно размеров родительского элемента. К примеру, если к элементу применить стиль height: 100%, то его высота будет равна высоте его родителя. А если написать height: 100vh, то высота будет равна высоте viewport’a, независимо от того, в каком месте DOM находится этот элемент.

Давайте рассмотрим синтаксис:

Теперь, когда мы ознакомились с терминологией, давайте рассмотрим примеры.

Фиксированное соотношение сторон

В этом примере мы также воспользуемся flexbox, чтоб задать ширину элементов. Проценты подводят нас, потому что невозможно рассчитать высоту, если она зависит от количества элементов в списке. Стоит отметить, что такого же результата можно было б добиться, используя внутреннее соотношение сторон. Но с единицами viewport’a мы получаем тот же эффект с меньшим количеством кода и без необходимости использовать абсолютное позиционирование.

.stack {
  display: flex;
  flex-wrap: wrap;
}

.stack__element {
  flex: 50vw;
  height: 50vh;
}

Ссылка на codepen. Попробуйте поменять значение высоты с 50vh на 50% и понаблюдать за результатом.

Элемент на всю высоту

Единицы viewport’a полезны, когда нужно, чтобы изображение занимало всю высоту пользовательского экрана. Без них нам бы понадобилось, чтобы все родители элемента .image тоже имели высоту 100%. А вот тот же результат с меньшим количеством кода:

.image {
  height: 100vh;
  width: auto;
}

Ссылка на codepen. Опять-таки поменяйте 100vh на 100% и посмотрите, что произойдет.

Элемент меньше, чем экран

Что, если нам нужно заставить высоту блока быть короче, чем viewport? Эта техника может быть полезна, если вы хотите точно контролировать высоту элемента относительно размеров viewport’a, чтобы элемент всегда оставался в зоне видимости.

.shorten-me {
  max-height: 90vh;
}

Ссылка на codepen. Попробуйте изменить ширину браузера, чтобы viewport стал очень узким. Понаблюдайте за поведением текстового блока.

Масштабируемый текст

Rem and Em дают разработчикам отличную гибкость в настройке размеров шрифтов, но эти единицы не могут динамически изменятся, когда меняется размер viewport’a. Однако, мы можем, так же как rem, наследовать размер шрифта корневого элемента, добавить к нему единицы viewport’a и масштабировать текст вместе с viewport’ом.

Будьте внимательны с этим методом. Текст может стать неразборчивым, так как он масштабируется вместе с viewport’ом. Единицы viewport’а хорошо комбинировать с media queries, чтобы убедиться в читабельности текста на экране любого размера. Если вы решили попробовать что-то подобное в своем дизайне, то я настоятельно рекомендую прочитать статью Зила Лью (Zell Liew) «Типография на основе единиц viewport’а».

html {
  font-size: 16px;
}

h1 {
  font-size: calc(100% + 5vw); 
}

Ссылка на codepen.

Выход за рамки

Единицы viewport’а позволяют выйти за рамки родительского элемента или элементов. В случае, когда в CMS очень сложно или невозможно изменить верстку шаблона, использование единиц viewport’а может дать желаемый результат независимо от верстки. Эта техника работает не всегда, но в некоторых случаях этот трюк очень полезен.

.container {
  max-width: 1024px;
  margin: 0 auto;
}

.breakout { 
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
  width: 100vw; 
}

Ссылка на codepen.

Поддержка браузеров и подводные камни

Не смотря на солидную поддержку единиц viewport’а всеми основными браузерами, все еще можно столкнутся с такими багами как:

  • Одна из основных проблем, за которыми нужно следить, это отсутствие поддержки единиц viewport’а внутри функции calc() в Safari 8 и ниже.
  • Некоторые версии Internet Explorer и Edge имеют не полную поддержку, например, еще нет поддержки для vmax.
  • Платформы, особенно Windows, не постоянны в том, как они рассчитывают ширину scrollbar’ов в браузерах.
  • Chrome на данный момент не учитывает единицы viewport’а во время печати.

Поскольку еще есть несколько багов, всегда стоит проверять caniuse перед тем, как применить новую технику в своем дизайне.

Вывод

Единицы viewport’а – одно из моих любимых дополнений в браузерах за последние годы. Однако, если вы не хотите, чтобы элементы менялись в зависимости от размера экрана, то это не то, что вам нужно. Но если, верстая элементы сайта, вы хотите получить отличную гибкость на множестве устройств, то единицы viewport’а отлично вам подойдут. Надеюсь, что их использование, хорошо вам послужит.

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