Использование единиц измерения vw и vh в создании современных сайтов
23 февраля 2017 | Опубликовано в css | 2 Комментариев »
Некоторые свойства и значения свойств CSS обделены вниманием разработчиков или потому, что они не достаточно привлекательны, или потому, что их области применения на первый взгляд не очевидны. Хорошим примером последней ситуации являются единицы измерения vw, vh, vmax и vmin, которые уже давно являются частью спецификации CSS3, но не так уж давно поддерживаются современными версиями браузеров.
В следующем уроке мы рассмотрим, почему эти единицы измерения идеально подходят для создания адаптивного веб-дизайна, а сейчас давайте разберемся, в чем их основная идея.
Зачем нам нужен еще один способ измерения размера для кода CSS?
Основная идея единиц измерения vw и vh очень простая: это процент от ширины и высоты окна браузера, соответственно.
- 1vw = 1/100 текущей ширины окна браузера, т. е., 1% ширины.
- 15vh = 15/100 текущей высоты окна браузера, т. е., 15% высоты.
И vw, и vh могут применяться с любым положительным числом: можно использовать целые числа и числа с плавающей точкой.
На первый взгляд, единицы измерения vw и vh могут выглядеть лишними, так как у нас уже есть единица измерения процент, которая записывается следующим образом:
div { width: 50%; }
Применяемая почти к любому элементу, единица измерения процент задает размер элемента относительно размера его родителя, которым может быть и окно браузера: например, идея и воплощение гибких изображений полностью на этом основаны. Но при внимательном рассмотрении становятся видны значительные ограничения единицы измерения процент:
- Ширина элемента body не включает внешние отступы.
- Высоту окна браузера всегда трудно измерить, так как высота элемента body зависит от количества содержимого на странице, а не от размеров окна браузера.
- Наиболее важно, что единица измерения процент не может применяться для задания размера шрифта относительно размера элемента body. Запись «font-size: 15%» задаст размер шрифта относительно его начальных размеров, а не относительно размеров окна браузера.
Так что равнозначная запись в единицах измерения vw для задания блоку размера, равного половине ширины окна браузера, не учитывая внешние отступы, которые могут повлиять на размер блока, будет следующей:
div { width: 50vw; }
Для задания размера шрифту заголовка относительно ширины окна браузера можно использовать следующую запись:
h1 { font-size: 5vw; }
Заключение
Единицы измерения vw и vh могут быть особо полезны при разработке для мобильных устройств, только с их помощью можно предсказуемым образом изменять размер текста при изменении размера окна браузера, а так же с их помощью удобно создавать идеальные адаптивные фигуры.
Автор урока Dudley Storey
Перевод — Дежурка
Смотрите также:
Комментарии
Оставить ответ
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
549
- Насколько важно сегодня использовать Web Safe цвета?
538
- 20 наборов кистей для Фотошопа, которые вам пригодятся
530
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- 30 примеров фрактального искусства
191
2 марта 2017 в 22:32
Все это было бы бесценно, если бы не «особое» поведение мобильного safari для элемента vh. Которое делает почти бесполезным использование vh. И что еще хуже, инженеры из Эппл не собираются исправлять это «особое» поведение.
Ответить