что означает единица измерения 1vh
Viewport единицы в CSS
В этой статье вы узнаете про единицы вьюпорта в CSS и варианты их применения.
Viewport единицы уже существуют несколько лет и со временем я вижу рост их применения другими разработчиками. Их полезность заключается в том, что они дают нам возможность выставлять размеры гибким и динамическим образом, без прямого использования JavaScript. Также, для них легко сделать фоллбэк в случае отсутствия поддержки браузером.
Интро
В соответствии со спецификацией CSS, процентные вьюпорт единицы относительны размеру изначального блок контейнера, который сам по себе является корневым элементом страницы.
Viewport ширина
Единица vw представляет собой процентное измерение ширины корневого элемента. Один vw равен 1% ширины вьюпорта.
Тут у нас есть элемент с таким CSS:
Viewport высота
Единица vh представляет собой процентное измерение высоты корневого элемента. Один vh равен 1% высоты вьюпорта.
У нас есть элемент с таким CSS:
Вот и всё! Теперь давайте взглянем на другие единицы.
Vmin
Эта единица является минимумом ширины или высоты вьюпорта. Если ширина вьюпорта больше его высоты, то значение единицы будет высчитано, основываясь на высоте.
Давайте посмотрим на пример ниже.
Вот как она будет считаться:
Как вы уже могли предположить, результат будет считаться таким образом:
Vmax
Давайте посмотрим на пример:
Результат бы был высчитан таким образом:
Как viewport единицы отличаются от процентов?
Они берут за основу корневой элемент страницы, в то время как проценты основаны на размере своего контейнера. Поэтому они и отличаются друг от друга и каждый имеет свойственные себе примеры использования.
Примеры использования viewport единиц
В следующих секциях мы посмотрим на некоторые примеры использования единиц viewport и на то, как их применять в ваших рабочих проектах.
Размер шрифта
Единицы вьюпорта идеальны для адаптивной типографики. Для примера, мы можем использовать следующий код для заголовка статьи:
Размер заголовка будет увеличиваться или уменьшаться в зависимости от ширины вьюпорта. Это как будто бы мы выдали размеру шрифта 5% ширины страницы. Однако, как бы не хотелось, а надо протестировать и смотрим, что получается.
Чтобы решить эту проблему, нам надо дать заголовку минимальный размер шрифта, который не может быть меньше положенной нормы. И тут CSS calc() спешит на помощь!
Сбрасывая font-size мы можем быть уверены в том, что размер шрифта не будет слишком большим. Тут возможно вам понадобится несколько медиа запросов, но это сугубо ваше личное дело когда и как их использовать в контексте проекта.
Полноэкранные секции
Иногда нам надо, чтобы секция забирала 100% высоты виюпорта. Это так называемые полноэкранные секции. Для их создания мы можем использовать вьюпорт единицу высоты.
Прилипающий футер
На больших экранах вы могли уже обратить внимание на то, что футер не прилипает к концу страницы. Ну и это нормально. Это даже не рассматривается как плохая практика. Однако, тут у нас есть пространство для улучшений. Давайте рассмотрим следующий кейс, в котором и происходит эта ошибка.
Чтобы её решить, нам нужно отдать основному контенту высоту, равную разнице между высотой вьюпорта и суммой хедера и футера. Динамически это довольно хитрая операция, но с помощью единиц вьюпорта всё становится довольно быстро и понятно.
Первое решение: calc и единицы вьюпорта
Если высота хедера и футера фиксированны, то их можно совместить с помощью функции calc() :
Это решение не гарантирует того, что оно будет всегда работать, особенно для футера. За всю свою карьеру я никогда не использовал футер с фиксированной высотой, потому что это просто непрактично, особенно на разных размерах экранов.
Второе решение: Flexbox и вьюпорт единицы (рекомендуемое)
Добавляя 100vh как высоту для body элемента, мы можем использовать флексы для того, чтобы основной контент занимал всё оставшееся место.
С учетом этого, наша проблема решена и у нас есть прилипающий футер вне зависимости от длины контента.
Адаптивные элементы
Занимаясь подготовкой материала я наткнулся на эту статью и она мне реально понравилась. Так что я возьму пример использования оттуда и объясню его своим способом.
Предположим, что у нас есть портфолио для того, чтобы показать свои адаптивные работы и у нас имеется три типа устройства (мобильные, планшеты и ноутбук). В каждом устройстве есть по изображению. Суть в том, чтобы сделать этот контент 100% отзывчивым на CSS.
Используя гриды и единицы вьюпорта, мы можем сделать это адаптивным и динамическим.
Выходим за пределы контейнера
Я обратил внимание на случай, который больше всего подходит для редакторских шаблонов. А именно когда дочерний элемент забирает 100% ширины вьюпорта, хотя его родитель ограничен в ней. Давайте рассмотрим пример ниже:
Чтобы достигнуть такого же эффекта, мы можем использовать вьюпорт единицы и свойства позиционирования. Вот наш CSS:
Давайте разберем всё по полочкам и поймём как это работает.
Добавляем width: 100vw
Самый важный шаг, который даст изображению ширину равную 100% вьюпорта.
Чтобы отцентровать изображение, нам понадобится выдать отрицательный маргин с половиной ширины вьюпорта.
Добавляем left: 50%
И наконец, мы отодвинем изображение в правую сторону со значением 50% от ширины его родителя.
Вертикальный и горизонтальный спейсинг
Модалка
В случае с модалками нам надо отталкивать их с самого верха вьюпорта. Зачастую я делал это с помощью свойства top и процентов с пикселями. Однако, с единицами вьюпорта, мы можем добавить спейсинг, который может меняться, основываясь на высоте самого вьюпорта.
Посмотрите это видео, чтобы посмотреть на результат.
Шапка
Шапка это секция, которая показывает нам общую картину на странице или сайте. Часто там есть заголовок и описание, и среди этого всего есть фиксированная высота и падинги для верха и подвала страницы. Тут нам интересны падинги.
Для примера, вот как выглядит CSS:
Вертикальный паддинг довольно мал на мобильных устройствах и он становится больше на больших вьюпортах. Как насчет использования единиц вьюпорта? Давайте посмотрим на это.
Я использовал vh для паддинга в шапке и маргина под заголовком. Обратите внимание как меняется спейсинг!
Сетка из нескольких элементов
Ещё один пример динамического спейсинга можно применить в сетке из нескольких элементов. Тут может быть всё: статьи, секции контента, услуги и тп. В нашем примере мы посмотрим на то, как можно использовать вьюпорт единицы для сетки из статей.
Vmin и Vmax — примеры использования
Изучая примеры использования для этих двух единиц, я не нашёл ничего, только этот пример из CSS-tricks.
Вертикальные медиа запросы и единицы вьюпорта
Несколько лет назад я написал статью о вертикальных медиа запросах.
Сейчас я хочу пролить свет на эту тему, так как она имеет прямое отношение к статье, которую вы сейчас читаете.
Секции на всю высоту экрана в Landscape режиме
Чтобы решить эту проблему, мы можем сделать следующее.
Или мы можем использовать orientation в медиа запросах:
Соотношение сторон
Мы можем использовать vh для создания адаптивных элементов, которые поддерживают актуальное состояние соотношения сторон вне зависимости от размера вьюпорта. Давайте на это посмотрим.
Нам нужно решить, какое соотношение сторон нам нужно. Для примера, 9/16.
Используем единицы вьюпорта для графических элементов
Я не уверен правильно ли я назвал это, но надеюсь, что вы поймете суть следующих графических примеров.
Довольно популярный подход с верхним бордером
Вы знали, что верхний бордер один из самых используемых элементов на веб сайтах к сегодняшнему дню? В основном его цвет, это такой же как и основной цвет страницы.
Ширина вьюпорта используется для расчета отношения между пикселями и vw единицей.
Для примера, вот как добавлен верхний бордер:
В моём случае ширина вьюпорта равна 1440.
И вот такой CSS мы получим:
Даже лучше, мы можем использовать основное значение в пикселях и единицу вьюпорта.
Нумерация секций
Для элементов секций с каунтером или иконкой, мы можем тоже применить единицы вьюпорта. Посмотрите на макет ниже:
Viewport Units Watcher
Я сделал инструмент, которые помогает мне в проверке высчитанного значения элементов у единиц вьюпорта. Посмотрите ниже:
Я добавил имя класса и свойство для каждого элемента и при смене размеров вьюпорта, значение будут динамически обновляться. Это куда лучше, чем использование DevTools и высчитывание каждого отдельного элемента.
Проблема со скроллом на мобильных устройствах
Использование 100vw как антипаттерн
Применяя 100vw для того, чтобы выдать элементу полную ширину вьюпорта, всё у вас будет отлично работать на Mac OS, так как вертикальный скроллбар там спрятан по-дефолту. Как результат, ширина скроллбара добавлена полной ширине.
Однако, пользователи Windows обратят внимание на то, что появился горизонтальный скроллинг. Почему? Потому что ширина скроллбара была добавлена ширине экрана. Скажем, что вы добавили такой CSS:
Насколько я знаю, то пока что нет конкретного решения этой проблемы без использования JavaScript, применение которого тут я не советую. Лучше избегать 100vw и использовать альтернативу. Для примера, мы можем применить CSS Grid, чтобы элемент вышел за пределы контейнера, посмотрите на решение в этой статье.
Спасибо Крису Моргану и Килиану Валкхофу за то, что предупредили меня об этой проблеме.
Доступность это важно
Используя единицы вьюпорта довольно часто на вашем проекте, например для создание всего макета, доступность становится очень важной. Когда шаблон зумится ближе или отдаляется, элементы с единицами вьюпорат не будут увеличиваться или уменьшаться как вы ожидали. Это станет проблемой для пользователей, которые полагались на зум в браузере.
По словам Сары Суейдан, использование единиц вьюпорта для размеров шрифтов это плохая практика в плане доступности. Лучше комбинировать их с фиксированными значениями, как описано ниже:
И это будет хорошо. Пожалуйста, убедитесь в том, что использование единиц вьюпорта подходит для того, что вы делаете и не забывайте хорошо тестировать.
Полезные инструменты
У вас есть какие-нибудь полезные инструменты? Дайте мне знать.
Типичный верстальщик
Единицы измерения CSS для font-size: px, %, em, rem, vw, vh, vmin, vmax
Всем привет! Меня зовут Анна Блок, и сегодня мы поговорим про единицы измерения в CSS. Наверняка, многие из вас знают о таких единицах измерения, как px и %. Однако, по мимо всего прочего, мы разберем, как работают rem, em, vh, vw, vmax и vmin.
Cтатья получится большой, поэтому разобьем её на две части. Здесь мы поговорим о том, как эти единицы измерения влияют на размер шрифта, т.е на font-size. Во второй части затронем тему, насколько удобно использовать такие единицы измерения для того что бы управлять свойствами padding, margin, height, width и border-radius.
Специально для вас я создала интерактивную шпаргалку, где наглядно отображены основные единицы измерения. Вы можете менять значения по мере прочтения статьи, чтобы материал лучше усваивался.
Pixels
Давайте начнем с самого распространенного — px (c англ. pixels). Пиксель — это базовая, абсолютная и окончательная единица измерения. Пиксель в CSS — это то, что вы видите на экране. Именно он задает значение разрешению монитора. Все значения браузер при веб-разработке пересчитывает в пиксели.
Итак, давайте разберем разметку, которая у нас есть в интерактивной форме. Например, в первом блоке, есть класс box-px за счет которого мы и будем стилизовать текст, который находится внутри.
Если мы используем значение меньше 16px, то наш текст уменьшается. И наоборот: если мы будем использовать значение больше, то текст увеличится. Звучит логично, не так ли? Но как работают другие единицы изменения? Давайте разбираться дальше.
Percent
Следующее значение, которое мы рассмотрим это проценты (%). Вы же помните, что браузер по умолчанию использует значение 16px? Это значит, что все относительные единицы, которые мы будем использовать в дальнейшем тоже будут преобразовываться в проценты. Но мы этого с вами не увидим, т.к. эти процессы будут проходить внутри браузера.
Для тега p добавим следующее:
Если бы мы указали здесь значение 200%, вышло бы, что мы взяли 2 раза по 8px, складываем 8px + 8px = 16px. Если мы укажем здесь 400%, то здесь у нас станет значение в два раза больше, то есть 16px * 2 = 32px.
Ознакомиться подробнее с HTML и CSS можно тут:
Ознакомиться подробнее с HTML и CSS можно тут:
Давайте снова вернемся к интерактивной шпаргалке. Мы можем проверить, какие единицы измерения работают в связке с body. Например, если добавить в блоке CSS,
то мы сразу увидим, какие значения меняются. Например, пиксели не изменились совершенно, но при этом у нас изменился блок «проценты» и «em».
Единица измерения rem, не зависит от body, и это первое ее отличие от em.
Вложенность
Итак, пока мы полностью не перешли к теме rem, давайте рассмотрим еще один пример связанный со вложенностями. Самый удобный пример, связанный с вложенностями — это списки, поэтому давайте будем работать с ними.
Первая проблема, которую мы видим, — каждая последующая вложенность становится меньше и кратна значению родителя. При этом, если мы используем значение больше единицы, например 1.8em, то каждая последующая вложенность увеличивается относительно предыдущего уровня. Эту проблему можно решить, но этот метод не совершенен:
В этом случае каждый последующий уровень выравнивается в значениях, но это лучше всего его решать при помощи единицы измерения rem. Именно о ней мы и будем дальше говорить.
Если мы вернемся к предыдущему примеру с вложенностями, то в данном случае, если мы напишем rem, эта проблема отпадёт. Вы так же можете использовать значения больше единицы, и при этом остальные уровни никак не видоизменятся. Они используют те же значения, что и первый элемент.
Ознакомиться подробнее с HTML и CSS можно тут:
Если в стилях запишем
то увидим, что это значение никак не видоизменится, т.к. первый «Lorem Ipsum» записан вне тегов. Он меняется по отношению к body, но при этом, если мы запишем селектор :root
то мы увидим, что значение post меняется относительно этого сектора.
Ознакомиться подробнее с HTML и CSS можно тут:
То, что я сейчас покажу — это анти-пример и я не советую применять на своих проектах. И в конце я объясню почему.
Заодно давайте поговорим о том, как вычислить 10px с точки зрения em. Для этого открываем калькулятор. Что бы вычислить, сколько будет 10px, мы делим 10 на тот размер, который у нас установлен по умолчанию, то есть на 16px. Итого у нас получается значение 0.625. Давайте запишем:
Этот метод удобен тем, что нам не потребуется прибегать к вычислениям. Всё это возможно вычислить в уме. Но я предлагаю сделать заголовок сделать все-таки чуть больше, например, 24px. В rem значении это будет 2.4rem.
Если вы не хотите использовать размер шрифта 10px по умолчанию, то вы можете использовать другое значение — 14px. Чтобы вычислить, сколько это будет в rem, для этого нужно 14px / 16px. Итог: 0.875rem
Теперь мы видим, что текст по умолчанию стал читабельным. Заголовок увеличился, потому что 2.4rem это уже не 24px. А сколько? Давайте посчитаем: 24px / 14px = 1.71rem. Давайте запишем:
В таком случае размер заголовка у нас стал таким же, как тогда когда у нас font-size составлял 10px. Конечно же, такое значение не вычислить в уме, однако работы с кодом по итогу будет значительно меньше.
Давайте предположим, что мы работаем с media-запросами. Например, размер шрифта нам нужно сделать чуть большедля планшетов и ПК устройств. То есть если мы будем использовать media-запросы то внутри мы можем записать min-width: 768px и внутри media мы запишем селектор :root с значением font-size: 1em, то есть 16px:
Таким образом, при увеличении экрана у нас размер шрифта становится больше, заголовок тоже автоматически становится больше, при этом, если вам нужно его подкорректировать вы это тоже можете сделать в media запросе, но в целом много стилей вам менять не потребуется. И это на самом деле удобнее, чем, если бы вы работали с простыми пикселями. Потому что если бы вы работали с пикселями, то вам потребовалось бы менять каждое значение, чтобы сохранить соотношение.
Ознакомиться подробнее с HTML и CSS можно тут:
VW / VH
Теперь давайте перейдем к следующим значениям. Это единицы измерения которые относятся к размеру экрана устройства. Все те значения, которые начинаются с буквы V, имеют в себе сокращение слова с английского «viewport» (пер. на русский «область просмотра»). Итак:
Последние два значения, еще не так хорошо поддерживаются браузерами, поэтому будьте осторожны, если захотите использовать их на своих проектах.
Итак, если рассмотреть пример, который мы видим здесь, и начать уменьшать экран, то можно увидеть, как vw уменьшается по ширине. При этом vh зависит от высоты, поэтому его значения никак не меняются. Если менять высоту экрана, то можно увидеть, что значения в блоке vh меняются в зависимости от высоты, а vw совершенно никак не реагирует. Запись
значит, что на экране монитора, у которого будет значение 1200px, элемент будет равен 24px. Откуда берется это значение? Это 2% от 1200px, то есть 1200px * 0.02 = 24px. При этом если взять, например, планшет, который в среднем составляет ширину 768px, то размер шрифта составит примерно 15px, то есть это 2% от 768px.
Значения vmin и vmax не применимы к font-size поэтому их уже рассмотрим в следующей части, но знайте, что эти значения есть и они работают в связке с vw и vh, однако их можно использовать не всегда, а только в том случае если они необходимы. И не забывайте про поддержку этих значений.
Я надеюсь, эта статья тебе помогла разобраться с тем, для чего используется каждая единица измерения в CSS.
Не забывай задавать свои вопросы по вёрстке или фронтенд разработке у профессионалов на FrontendHelp в режиме онлайн.
[ Berloga13 ]
Веб-студия
Единицы измерения CSS (px, %, em, rem, vw, vh)
Размер имеет значение… Но какие единицы измерения лучше?
1px — пиксель, это точка на экране пользователя, точный физический размер зависит от разрешения устройства. В каких бы единицах измерения мы бы не писали код, он приводится именно к px. Самая часто встречающаяся величина, как в HTML так и в CSS. Например, начальный размер img изменяется именно в px.
1% — относительная величина (считается либо от родителя либо от монитора), px не равен %
1 em = относительные единицы измерения, относительны значению font-size родителя.
Например: размер font-size у html — 20px, для h1 — 2rem, это будет равно 40px
html <
font-size: 20px;
>
h1 <
font-size: 2rem;
/* что равно 20px * 2rem = 40px */
>
1vw (viewport width) = 1% от ширины окна.
1vh (viewport height) = 1% от высоты окна.
Единицы измерения vh и vw
viewport – это видимая часть окна браузера (мобильного или десктопного).
В CSS3 были добавлены относительные единицы измерения, такие как vh и vw. Эти единицы вычисляются относительно размеров окна браузера.
Для desktop ширина окна браузера больше ширины области просмотра (добавляется ширина скроллбара), поэтому если для элемента установить ширину 100vw, то он выйдет за пределы html. Вывод установить ширину 100vw — не самая лучшая идея, если не использовать параллельно свойство overflow. А вот высоту у родительского блока делать 100vh — это очень хорошая идея, так как просто % не отработает.
Единицы vh и vw основаны на использовании процентных значений. Но проценты далеко не лучшее решение для каждого случая, так как они вычисляются относительно размеров ближайшего родительского элемента. Поэтому, если вы хотите использовать высоту и ширину окна браузера, лучше воспользоваться единицами vh и vw. Например, если высота окна браузера равна 900px, то 1vh будет равен 9px. Аналогично, если ширина окна браузера равна 1600px, то 1vw будет равен 16px.
Адаптивное полноэкранное фоновое изображение, то чего все ждали
Так как ширина элемента, указанная с помощью 100vw больше ширины области просмотра, то для создания полноэкранных фоновых изображений лучше использовать ширину 100%, которая будет равна ширине корневого элемента html.
.fon <
background: url(fon.png);
background-position: center;
background-size: cover;
width: 100%;
height: 100vh;
>
Высоту, заданную с помощью vh также можно использовать для выравнивания элемента по центру страницы:
body <
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
>
Таким образом элемент будет расположен строго по центру!