Так как верстка страниц становится все более сложной, разработчикам требуется доступ к большему количеству единиц измерений, чтобы воплотить дизайн в жизнь. Кроме привычных процентов, em и rem, и пикселей существуют более новые единицы измерения vw и vh, и родственные им vmin и vmax, предоставляющие более мощные способы создания адаптивного дизайна, которые нередко могут помочь отказаться от использования точек перехода @media.

Выходим за пределы использования процентов

Традиционные единицы измерения CSS создают следующие проблемы в веб-дизайне:

• Единица измерения процент не всегда работает, как ожидается. Разработчикам приходится помнить о внешних отступах, задавая размеры элементам. Не следует использовать единицу измерения процент для задания высоты элементу body. Запись font-size: 50% задает тексту размер, равный половине его стандартного размера, а не устанавливает зависимость между размером текста и размером содержащего его элемента.
• Почти невозможно создавать фигуры идеальной формы для разных размеров окна браузера. Очень сложно добиться того, чтобы элемент был идеально квадратным и в то же время адаптивным.

Единицы измерения vw и vh в значительной мере решают все эти проблемы.

Поддерживание идеальных пропорций

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

div.twentysquare {
        background: #999;
        width: 20vw;
        height: 20vw;
}

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

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

div.onetworect {
        width: 20vw; height: 40vw;
}

Задать баннеру идеальное соотношение размеров очень просто с помощью следующего кода CSS:

div.goldenrect {
        width: 100vw;
        height: 61.8vw;
        background: red;
}

Для оптимального масштабирования текста в адаптивном блоке, занимания всего предоставленного ему объема с разбивкой на строки, нужно всего лишь задать размер шрифта в единицах измерения vw.

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

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

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

• Использование единиц измерения vw и vh в создании современных сайтов
• Верстка столбцами в стиле социального интернет-сервиса Pinterest на CSS
• Создание подписей изображений с использованием элементов фигур