Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Создание идеальных адаптивных фигур с помощью единицы измерения CSS vw

3 марта 2017 | Опубликовано в css | 2 Комментариев »

Так как верстка страниц становится все более сложной, разработчикам требуется доступ к большему количеству единиц измерений, чтобы воплотить дизайн в жизнь. Кроме привычных процентов, 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

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

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




Комментарии

  1. Илья
    Thumb up Thumb down 0

    Спасибо за статью, узнал много нового и думаю, что буду применять на своем сайте! 8)

    Ответить

Оставить ответ


− четыре = 2

Вставить изображение