Vh css: vw, vh, vmin, vmax — CSS — Дока

Leave a Comment / Css / By /

vw, vh, vmin, vmax — CSS — Дока

  1. Кратко
  2. Пример
  3. Как понять
    1. vh
    2. vw
    3. vmin
    4. vmax
  4. На практике
    1. Денис Ежков советует

Кратко

Секция статьи «Кратко»

Это относительные единицы измерения. Все они задают размер относительно размеров окна браузера (viewport), то есть видимой части документа.

Пример

Секция статьи «Пример»

Высота блока будет равна 30% ширины вьюпорта, а высота — 50% высоты вьюпорта:

div {  min-width: 30vw;  height: 50vh;}
          div {
  min-width: 30vw;
  height: 50vh;
}

Как понять

Секция статьи «Как понять»

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

vh Секция статьи «vh»

Размер указывается в процентах от высоты вьюпорта (viewport height). 100vh соответствует полной высоте вьюпорта. 1vh = 1% высоты вьюпорта.

Открыть демо в новой вкладке

vw Секция статьи «vw»

Размер в процентах от ширины вьюпорта (viewport width). 100vw соответствует полной ширине вьюпорта. 1vw = 1% ширины вьюпорта.

vmin Секция статьи «vmin»

Размер в процентах от меньшей размерности вьюпорта. Если высота меньше ширины (например, горизонтальная ориентация телефона), то расчёт будет вестись относительно высоты.

Открыть демо в новой вкладке

vmax Секция статьи «vmax»

Размер в процентах от большей размерности вьюпорта. Если высота больше ширины (например, нормальная ориентация телефона), то расчёт будет вестись относительно высоты.

На практике

Секция статьи «На практике»

Денис Ежков советует

Секция статьи «Денис Ежков советует»

🛠 В операционных системах Linux и Windows использование 100vw может осложняться тем фактом, что вертикальный скроллбар является частью вьюпорта и уменьшает фактическую ширину страницы. Но ширина вьюпорта остаётся неизменной. Поэтому, если есть вертикальный скролл, то задание ширины блока 100vw вызовет появление горизонтального скролла. На macOS этот эффект не наблюдается, потому что там скролл располагается НАД содержимым страницы, а не рядом.

Открыть демо в новой вкладке

В ОС Linux и Windows в этом примере будет наблюдаться горизонтальный скролл.

🛠Относительные единицы измерения прекрасно подходят для адаптивной вёрстки, а если учесть, что на мобильных устройствах скролл находится НАД содержимым страницы, у нас вообще нет никаких проблем с этими единицами.

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

Единицы измерения

alt + ←

→

rem, em

alt + →

vh | CSS | WebReference

  • Содержание
    • Пример
    • Спецификация
    • Браузеры

Единица vh соответствует 1% от высоты области просмотра браузера, таким образом, 100vh равно всей высоте области просмотра. Элементы, высота которых задана в единицах vh будут менять свой размер при изменении размеров окна браузера.

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>vh</title> <style> html { scroll-behavior: smooth; /* Плавная прокрутка */ } body { margin: 0; /* Убираем отступы */ } section { height: 100vh; /* Полная высота */ padding: 20px; /* Поля вокруг текста */ box-sizing: border-box; /* Высота не учитывает padding */ } section h3 { color: #fff; /* Цвет текста */ } #page1 { background: #FFDB8A; } #page2 { background: #5085B6; } #page3 { background: #85AB8F; } #page4 { background: #C898AE; } </style> </head> <body> <section> <a href=»#page2″>Наши приложения</a> <a href=»#page3″>Особенности</a> <a href=»#page4″>Контакты</a> </section> <section><h3>Наши приложения</h3></section> <section><h3>Особенности</h3></section> <section><h3>Контакты</h3></section> </body> </html>

В данном примере создаётся несколько разделов, высота которых равна высоте области просмотра. При изменении размеров окна браузера высота разделов масштабируется соответственно.

Спецификация

СпецификацияСтатус
CSS Values and Units Module Level 4Рабочий проект
CSS Values and Units Module Level 3Возможная рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

91220
20		619
519466

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

См. также

  • vmax
  • vmin
  • vw

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 28.09.2019

Редакторы: Влад Мержевич

Единицы CSS

❮ Предыдущая Далее ❯

Единицы CSS

CSS имеет несколько различных единиц измерения длины.

Многие свойства CSS принимают значения длины, например ширина , поля , отступ , размер шрифта и т. д.

Длина — это число, за которым следует единица длины, например 10px , 2em и т. д.

Пример

Установка различных значений длины, используя px (пиксели):

h2 {
  размер шрифта: 60 ​​пикселей;
}

p {
  размер шрифта: 25 пикселей;
высота строки: 50px;
}

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

Примечание: Между числом и единицей измерения не должно быть пробела. Однако, если значение 0 единицу измерения можно не указывать.

Для некоторых свойств CSS допускается отрицательная длина.

Существует два типа единиц длины: абсолютные и относительные .

Абсолютные длины

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

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

Блок Описание
см сантиметра Попытайся
мм миллиметра Попытайся
в дюйма (1 дюйм = 96 пикселей = 2,54 см) Попытайся
пикселей * пикселя (1 пиксель = 1/96 дюйма) Попытайся
пт балла (1 балл = 1/72 от 1 дюйма) Попытайся
шт. пика (1 шт = 12 пт) Попытайся

* Пиксели (px) относятся к устройству просмотра. Для устройств с низким разрешением 1 пиксель — это один пиксель (точка) устройства на дисплее. Для принтеров и высокого разрешения экраны 1px подразумевает несколько пикселей устройства.

Относительная длина

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

№
Блок Описание
эм Относительно размера шрифта элемента (2em означает удвоенный размер текущего шрифта) Попробуйте
бывший Относительно x-высоты текущего шрифта (используется редко) Попробуйте
ч Относительно ширины «0» (ноль) Попробуйте
рем Относительно размера шрифта корневого элемента Попробуйте
ВВ Относительно 1% ширины окна просмотра* Попробуйте
вх Относительно 1% высоты окна просмотра* Попробуй
об/мин Относительно 1% меньшего размера области просмотра* Попробуйте
вмакс Относительно 1% большего размера окна просмотра* Попробуйте
% Относительно родительского элемента Попробуйте

Совет: Единицы em и rem удобны для создания идеальных масштабируемая планировка!
* Viewport = размер окна браузера.

Если окно просмотра 50см широкий, 1vw = 0,5см.

Поддержка браузера

Цифры в таблице указывают первую версию браузера, которая полностью поддерживает единица длины.

Единица длины
em, ex, %, px, cm, mm, in, pt, pc 1,0 3,0 1,0 1,0 3,5
ч 27,0 9,0 1,0 7,0 20,0
рем 4,0 9,0 3,6 4.1 11,6
вх, вв 20,0 9,0 19,0 6,0 20,0
об/мин
20,0		 12,0 19,0 6,0 20,0
вмакс 26,0 16,0 19,0 7,0 20,0

❮ Предыдущий Далее ❯


Единицы области просмотра: vw, vh, vmin, vmax

Могу ли я использовать

Поиск

?

Единицы области просмотра: vw, vh, vmin, vmax

— CR

  • global»>
    Глобальное использование
    97,6% + 0,64% знак равно 98,24%

Единицы длины, представляющие процент от размеров текущего окна просмотра: ширина (vw), высота (vh), меньшая из двух (vmin) или большая из двух (vmax).

Chrome
  1. 4–19: не поддерживается
  2. 20–25: частичная поддержка
  3. 26–106: поддерживается
  4. 107: поддерживается
  5. 108–103: поддерживается0343
    Edge
    1. 12 — 15: Частичная поддержка
    2. 16 — 105: Поддержано
    3. 106: Поддержано
    Safari
    1. 3,11-5.1: не поддерживает
      1. 03% — Not supported»> 3,1-5.1: не поддерживает нота.
      2. 16.1: Supported
      3. 16.2 — TP: Supported
      Firefox
      1. 2 — 18: Not supported
      2. 19 — 105: Supported
      3. 106: Supported
      4. 107 — 108: Supported
      Opera
      1. 9 — 12.1: Not supported
      2. 15 — 90: Supported
      3. 91: Supported
      IE
      1. 5.5 — 8: Not supported
      2. 9: Partial support
      3. 10: Partial support
      4. 48% — Partial support»> 11: Частичная поддержка
      Chrome для Android
      1. 106: Поддерживается
      Safari на iOS
      1. 3.2–5.1: Не поддерживается
      2. 7: Частичная поддержка6
        3. 6: Частичная поддержка0417 8 — 16.0: Supported
      3. 16.1: Supported
      Samsung Internet
      1. 4 — 17.0: Supported
      2. 18.0: Supported
      Opera Mini
      1. all: Not supported
      Opera Mobile
      1. 10 — 12.1: Не поддерживается
      2. 64: Поддерживается
      Браузер UC для Android

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *