Единицы измерения CSS, связанные с областью просмотра

Единицы измерения CSS, связанные с областью просмотра

От автора: единицы измерения CSS, связанные с областью просмотра, появились несколько лет назад, и со временем я вижу, что они все больше используются разработчиками. Их преимущество заключается в том, что мы можем гибко и динамично оценивать размер вещей без необходимости использования JavaScript. Кроме того, для них легко предоставить запасной вариант.

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

В соответствии со спецификацией CSS, проценты в единицах измерения, связанных с областью просмотра, относятся к размеру исходного содержащего блока, который является корневым элементом веб-страницы. К ним относятся: vw, vh, vmin, и vmax.

Ширина области просмотра

Единица измерения vw представляет собой процент ширины корневого элемента. Один vw равен 1% ширины области просмотра.

Единицы измерения CSS, связанные с областью просмотра

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

У нас есть элемент со следующим CSS:

Когда ширина области просмотра равна 500px, 50vw будет рассчитываться, как показано ниже:

Высота области просмотра

Единица измерения vh представляет собой процент от высоты корневого элемента. Один vh равен 1% высоты области просмотра.

Единицы измерения CSS, связанные с областью просмотра

У нас есть элемент со следующим CSS:

Когда высота области просмотра равна 290px, 70vh будет рассчитываться, как показано ниже:

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

Единица измерения Vmin

vmin представляет значение минимальной ширины и высоты области просмотра. Если ширина области просмотра больше его высоты, то значение будет рассчитываться на основе высоты. Давайте возьмем следующий пример.

У нас есть смартфон в альбомной ориентации, и для элемента задана vmin. В этом случае значение будет рассчитываться на основе высоты области просмотра, поскольку она меньше ширины.

Единицы измерения CSS, связанные с областью просмотра

Вот как будет рассчитываться vmin:

Единицы измерения CSS, связанные с областью просмотра

Как вы уже догадались, результат будет рассчитан следующим образом:

Единица измерения Vmax

Это противоположность vmin. Значение рассчитывается на основе максимальной ширины и высоты.

Единицы измерения CSS, связанные с областью просмотра

Давайте рассмотрим следующий пример.

Единицы измерения CSS, связанные с областью просмотра

Результат будет рассчитан как:

Чем единицы измерения, связанные с областью просмотра, отличаются от процентов?

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

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

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

Размер шрифта

Единицы измерения CSS, связанные с областью просмотра

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

font-size заголовка будет увеличиваться или уменьшаться в зависимости от ширины области просмотра. Это как задать размер шрифта 5% от ширины области просмотра. Тем не менее, может быть заманчиво просто использовать его без надлежащего тестирования.

Обратите внимание на то, что размер шрифта стал очень малым для мобильных устройств, это плохо сказывается на доступности и удобстве использования. Насколько я знаю, минимальный размер шрифта на мобильном устройстве не должен выходить за рамки 14px. В GIF размер шрифта уменьшился ниже 10px.

Чтобы решить эту проблему, мы должны задать для заголовка минимальный размер шрифта. CSS calc() вам в помощь!

Функция CSS calc() будет иметь базовое значение 14px, и добавит к нему 2vw. Учитывая это, значение размера шрифта не станет слишком маленьким.

Еще одна важная вещь, которую следует учитывать — это как будет вести себя размер шрифта на больших экранах, например, на 27-дюймовом iMac. Что случится? Ну, вы уже догадались. Размер шрифта увеличился до 95px, что слишком много. Чтобы предотвратить это, мы должны использовать медиа-запросы и изменять font-size в определенных контрольных точках.

Сбрасывая font-size, мы можем быть уверены, что размер не будет слишком большим. Вам также может понадобиться добавить несколько медиа-запросов, но это зависит от вас и от контекста проекта.

Демонстрация

Разделы на весь экран

Иногда нам нужен раздел, который должен охватывать 100% высоты области просмотра. Их еще называют «полноэкранными разделами». Для этого мы можем использовать высоту окна просмотра.

Единицы измерения CSS, связанные с областью просмотра

Указывая height: 100vh, мы можем гарантировать, что высота раздела будет 100% от области просмотра. Также я добавил несколько flexbox для центрирования контента по горизонтали и вертикали.

Демонстрация

Липкий футер

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

Единицы измерения CSS, связанные с областью просмотра

Чтобы решить это, нам нужно задать для основного контента высоту, равную высоте области просмотра — (хэдер и футер). Сделать это динамически довольно сложно, но с помощью единиц измерения CSS, связанных с областью просмотра, это делается так.

1. Первое решение: calc и единицы, связанные с областью просмотра

Если высота хэдера и футера фиксирована, можно объединить обе функции calc() с единицами, связанными областью просмотра. Вот как:

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

2. Второе решение: Flexbox и единицы, связанные с областью просмотра (рекомендуется )

Добавив для элемента body высоту 100vh, мы можем использовать flexbox, чтобы основной элемент занял оставшееся пространство.

Проблема решена, и у нас есть липкий футер независимо от длины контента.

Единицы измерения CSS, связанные с областью просмотра

Демонстрация

Адаптивные элементы

Я наткнулся на эту статью во время исследования, и она мне действительно понравилась, поэтому я возьму из нее пример использования и объясню его по-своему.

Предположим, у нас есть порт-фолио для демонстрации наших адаптивных дизайнерских работ, и у нас есть три устройства (мобильное, планшетное и портативное). Каждый макет содержит изображение. Цель состоит в том, чтобы сделать их на 100% адаптивными в CSS.

Единицы измерения CSS, связанные с областью просмотра

Используя сетку CSS и единицы измерения, связанные с областью просмотра, мы можем сделать это полностью адаптивным и динамичным.

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

Демонстрация

Выход за пределы контейнера

Я нашел один вариант использования, который наиболее подходит для редакционных макетов. Дочерний элемент, который занимает 100% ширины области просмотра, даже если ширина его родителя ограничена. Посмотрите на рисунок ниже:

Единицы измерения CSS, связанные с областью просмотра

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Давайте рассмотрим это подробнее, чтобы понять, как все это работает.

1. Добавление width: 100vw

Самый важный шаг, который задаст для изображения ширину, равную 100% области просмотра.

Единицы измерения CSS, связанные с областью просмотра

2. Добавление margin-left: -50vw

Чтобы отцентрировать изображение, нам нужно задать для него отрицательное поле с половиной ширины области просмотра.

Единицы измерения CSS, связанные с областью просмотра

3. Добавление left: 50%

Наконец, нам нужно будет сдвинуть изображение вправо на 50% ширины его родителя.

Единицы измерения CSS, связанные с областью просмотра

Демонстрация

Вертикальные и горизонтальные отступы

Еще один интересный пример применения, о котором я подумал — это использование единиц измерения, связанных с областью просмотра, для отступов между элементами. Они могут быть использованы с margin, top, bottom и grid-gap. При этом отступ будет основываться на ширине или высоте области просмотра, что может быть полезно, чтобы сделать макет более динамичным.

Модалы

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

Единицы измерения CSS, связанные с областью просмотра

Демонстрация

Шапка страницы

Шапка — это раздел, который служит введением для страницы. Он часто содержит заголовок и описание, они могут иметь либо фиксированную высоту, либо отступы для верхнего и нижнего краев. Мы можем сделать больше. Например, вот как выглядит CSS:

Отступы по вертикали на мобильном устройстве слишком малы, а на больших экранах слишком велики. Как насчет использования единиц измерения, связанных с областью просмотра? Давайте попробуем.

Я использовал vh для отступа перед заголовком страницы и под заголовком. Обратите внимание, как меняется расстояние!

Демонстрация

Элементы в сетке

Еще один вариант использования динамического интервала — это элементы в сетке. Это может быть что угодно, например, сетка статей, раздел услуг и т. д. В нашем случае мы рассмотрим, как использовать это для сетки статей.

Единицы измерения CSS, связанные с областью просмотра

Используя внутри окна просмотра grid-gap, мы можем получить желаемый результат. Обратите внимание, что я также использовал функцию CSS calc(). Цель использования calc() — получить базовый вертикальный и горизонтальный зазор.

Демонстрация

Варианты использования Vmin и Vmax

Исследуя варианты использования этих двух значений, я не нашел ничего, кроме этого на CSS-Tricks. Вариант использования — это верхний и нижний отступы для элемента заголовка страницы. Отступ часто уменьшается, когда область просмотра небольшая (мобильные устройства). Используя vmin, мы можем получить аккуратные верхние и нижние отступы, основанные на меньшем размере области просмотра (ширина или высота).

Демонстрация

Вертикальные медиа-запросы и единицы измерения, связанные с областью просмотра

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

Раздел на всю высоту при альбомной ориентации

Используя вертикальные медиа-запросы, мы можем проверить, имеет ли смартфон или планшет пользователя горизонтальную ориентацию. Если это так, то не имеет смысла задавать раздел, занимающий всю высоту области просмотра с помощью height: 100vh.

Единицы измерения CSS, связанные с областью просмотра

Чтобы решить эту проблему, мы можем сделать следующее:

Или мы можем использовать ориентационный медиа-запрос:

Соотношение сторон

Мы можем использовать vw для создания адаптивных элементов, которые сохраняют пропорции независимо от размера области просмотра. Давайте рассмотрим это. Нам нужно определиться с необходимым соотношением сторон. Для этого примера я буду использовать 9/16.

Демонстрация

Использование единиц измерения, связанных с областью просмотра, для графических элементов

Я не уверен, правильно ли я это назвал, но надеюсь, что вы поймете суть из следующих примеров.

Популярная верхняя граница

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

Единицы измерения CSS, связанные с областью просмотра

Давайте представим, что начальное значение для ширины границы 3px. Как преобразовать это фиксированное значение в единицы измерения, связанные с областью просмотра? Ну, вот как рассчитать его vw-эквивалент.

Ширина области просмотра используется для оценки отношения между значением в пикселях и желаемым значением в vw. Для нашего примера вот как добавляется верхняя граница:

В моем случае ширина области просмотра составляет 1440 (это не фиксированное число, замените его на то, что нравится вам).

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

Нумерация разделов

Для элементов раздела со счетчиком или значком мы можем использовать единицы измерения, связанные с областью просмотра. Рассмотрим макет ниже:

Единицы измерения CSS, связанные с областью просмотра

У нас есть круг, содержащий число, и есть текстовое содержимое. Оба из них должны гибко задаваться в единицах измерения, связанных с областью просмотра. Давайте рассмотрим, как!

Единицы измерения CSS, связанные с областью просмотра

Демонстрация

Отслеживание единиц измерения, связанных с областью просмотра

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

Единицы измерения CSS, связанные с областью просмотра

Я добавил имя класса и свойство для каждого элемента, и при изменении размера области просмотра значения обновляются динамически. Это намного лучше, чем проверка через инструменты разработчика и переход к вычислению для каждого конкретного элемента.

Попробуйте сами

Запуск прокрутки на мобильных устройствах

Существует общая проблема для мобильных устройств, которая представляет собой прокрутку, даже если используется 100vh. Причина в том, что в оке отображается еще адресная строка. Луис Хебрегтс написал об этом статью, в которой описано простое исправление.

Единицы измерения CSS, связанные с областью просмотра

Демонстрация

Доступность имеет значение

При широком использовании в проекте единиц измерения, связанных с областью просмотра, например, для создания целого макета, важна доступность. Когда макет увеличивается / уменьшается, элементы, заданные в этих единицах, не масштабируются, как вы могли ожидать. Это вызовет проблему у пользователей, которые используют для просмотра веб-страниц изменение масштаба.

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

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

Полезные инструменты

Я нашел этот маленький конвертер px в vw, который может помочь вам в ваших проектах.

Автор: Ahmad Shadeed

Источник: https://ishadeed.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Фреймворк Bootstrap 4. Быстрый старт

Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля!

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook: