Некоторые свойства и значения свойств CSS обделены вниманием разработчиков или потому, что они не достаточно привлекательны, или потому, что их области применения на первый взгляд не очевидны. Хорошим примером последней ситуации являются единицы измерения vw, vh, vmax и vmin, которые уже давно являются частью спецификации CSS3, но не так уж давно поддерживаются современными версиями браузеров.

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

Зачем нам нужен еще один способ измерения размера для кода CSS?

Основная идея единиц измерения vw и vh очень простая: это процент от ширины и высоты окна браузера, соответственно.

• 1vw = 1/100 текущей ширины окна браузера, т. е., 1% ширины.
• 15vh = 15/100 текущей высоты окна браузера, т. е., 15% высоты.

И  vw, и vh могут применяться с любым положительным числом: можно использовать целые числа и числа с плавающей точкой.

На первый взгляд, единицы измерения vw и vh могут выглядеть лишними, так как у нас уже есть единица измерения процент, которая записывается следующим образом:

div { width: 50%; }

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

1. Ширина элемента body не включает внешние отступы.
2. Высоту окна браузера всегда трудно измерить, так как высота элемента body зависит от количества содержимого на странице, а не от размеров окна браузера.
3. Наиболее важно, что единица измерения процент не может применяться для задания размера шрифта относительно размера элемента body. Запись «font-size: 15%» задаст размер шрифта относительно его начальных размеров, а не относительно размеров окна браузера.

Так что равнозначная запись в единицах измерения vw для задания блоку размера, равного половине ширины окна браузера, не учитывая внешние отступы, которые могут повлиять на размер блока, будет следующей:

div { width: 50vw; }

Для задания размера шрифту заголовка относительно ширины окна браузера можно использовать следующую запись:

h1 { font-size: 5vw; }

Заключение

Единицы измерения vw и vh могут быть особо полезны при разработке для мобильных устройств, только с их помощью можно предсказуемым образом изменять размер текста при изменении размера окна браузера, а так же с их помощью удобно создавать идеальные адаптивные фигуры.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Обзор единиц измерения CSS: углов, времени и частоты
• Использование альтернативных единиц измерения для трансформаций поворота CSS3
• Обзор единиц измерения CSS3 и их использования