Единицы измерения vh, vw, vmin, vmax. Единицы измерения

Существует несколько свойств в CSS, которые принимают длину (или расстояние) в качестве значений. К этим свойствам относятся свойства блочной модели: width , height , margin , padding , border . Но существуют и другие свойства, например, смещение и размер тени у свойства box-shadow или размер или интервал шрифта. Какие единицы измерения «длины» принято использовать в CSS? Существует много вариантов.

Абсолютные единицы измерения длины

Пиксели px

.wrap { width: 400px; }

Пиксель, возможно, лучше всего рассматривать как «абстрактную величину», так как он не имеет ничего общего с физическим пикселем вашего дисплея.

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

Пиксели основная единица измерения в вебе, и так как они отображаются практически единообразно, многие длины высчитываются в пикселях; тот же javascript «разговаривает» на пикселях.

Дюймы in

.wrap { width: 4in; }

Дюйм (от нидерл. duim - большой палец) - единица измерения расстояния в некоторых европейских неметрических системах мер. В css дюймы просто сопоставляются с пикселями. Тем не менее, стоит отметить, что дюймы очень редко используются в CSS.

1in == 96px

Сантиметры cm

.wrap { width: 20cm; }

Сантиметр - единица длины в различных метрических системах мер, равная 0,01 метра. В css также сопоставляется с пикселями.

1cm == 37.8px

Миллиметры mm

.wrap { width: 200mm; } 1mm == 0.1cm == 3.78px

Шрифто-зависимые единицы измерения

Em

.wrap { width: 40em; }

Относительная единица измерения. В полиграфии используются дополнительные единицы измерения – одна из них соответствуют ширине заглавной букве М. Основное свойство влияющее на размер шрифта – font-size .

Без всяких дополнительных css правил 1em работает так:

1em == 16px == 0.17in == 12pt == 1pc == 4.2mm == 0.42cm

Если в документе изменить размер шрифта, 1em становится равным текущему (установленному) размеру шрифта.

Существуют некоторые на первый взгляд странные вещи. Если элемент с размером шрифта 1.1em находится в элементе с font-size равным также 1.1em , плюс они имеют общего родителя, у которого шрифт равен 1.1em , то результирующая высота шрифта самого вложенного элемента будет равна 1.1 X 1.1 X 1.1 == 1.331em . То есть вы должны учитывать следующее: когда вы назначаете элементу размер шрифта равный, например, 10em , и то это совсем не значит, что куда бы вы ни вложили элемент, его шрифт будет равен 10em . Все зависит от контекста (увидеть доказательство).

Rem

.wrap { width: 40rem; }

Rems предлагают лучшую альтернативу em s. Они работают почти одинаково, за исключением одного ключевого отличия: единицы rem всегда соотносится с фиксированным базовым значением, а именно - с размером шрифта корневого элемента документа (в случае HTML это всегда элемент html).

Неполная поддержка браузерами: не работает в IE 8, Safari 4, или iOS 3.2.

Пункты

.wrap { width: 120pt; }

Пункты – единица измерения равная 1/72 дюйма. Пункты очень распространены за пределами CSS (вероятно, поэтому они и включены в CSS).

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

Пика

.wrap { width: 12pc; }

Та же история, что и с пунктами, но 1pc == 12pt .

Ex

.wrap { width: 60ex; }

Эта единица измерения основана на высоте буквы х (в нижнем регистре) текущего шрифта. Иногда информация о высоте буквы x встроена в сам шрифт, иногда браузер вычисляет эту высоту путем измерения высоты символа в нижнем регистре, и в худшем случае, браузер просто устанавливает эту высоту как 0.5em . Чтобы понять, почему используется x-высота, представьте верхний выносной элемент (ascender), например, у строчной буквы d. Х-высота не включает эту выноску.

В отличие от em s, которые не меняются при изменении свойства font-family , единицы измерения ex поменяются, когда вы измените значение у свойства font-family (доказательство).

Ch

.wrap { width: 60ch; }

По духу похожа на x-высоту, только вместо x-высоты, используется ширина символа 0. Также меняется при изменении значения у свойства font-family .

Поддержка браузерами: на данный момент не поддерживается браузерами на основе webkit (safari, яндекс, chrome).

Процентные единицы измерения длины, зависящие от размеров области просмотра

Vw

.wrap { width: 10vw; }

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

Поддержка браузерами: не поддерживается любым мобильным браузером, за исключением ios6. Это относится ко всем относительным единицам области просмотра.

Vh

.wrap { width: 10vh; }

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

Vmin

.wrap { width: 20vmin; }

1vmin принимает 1vw или 1vh , в зависимости от того, что меньше. При определении размера стандартного шрифта vmin может быть гораздо полезнее, чем vh или vw .

Vmax

.wrap { width: 20vmax; }

1vmin принимает 1vw или 1vh , в зависимости от того, что больше.

Поддержка браузерами: браузеры на основе webkit поддерживают vmin, но не поддерживают vmax (пока). Firefox поддерживает vmax .

Проценты

.wrap { width: 50%; }

Расстояние заданное в процентах зависит от того же свойства родительского элемента. Например, если элемент имеет ширину равную 450px , а его элемент-ребенок ширину равную 50% , то ширина элемента-ребенка булет равна 225px .

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

В CSS3 были добавлены новые относительные единицы измерения, такие как vh , vw , vmin , vmax . Эти единицы вычисляются относительно размеров окна браузера. Для настольных компьютеров ширина окна браузера больше ширины области просмотра (добавляется ширина скроллбара), поэтому если для элемента установить ширину 100vw , то он выйдет за пределы html.

Рис. 1. Полноэкранное фоновое изображение с шириной 100vw

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

IE: 9.0 кроме vmax, вместо vmin используйте vm
Edge: 12.0 кроме vmax, вместо vmin используйте vm
Firefox: 19.0
Chrome: 26.0
Opera: 15.0
Safari: 6.1
iOS Safari: 8.0
Android: 4.4
Chrome for Android: 55.0

1. Единицы vh и vw

Приёмы отзывчивого веб-дизайна базируются на использовании процентных значений. Но проценты далеко не лучшее решение для каждого случая, так как они вычисляются относительно размеров ближайшего родительского элемента. Поэтому, если вы хотите использовать высоту и ширину окна браузера, лучше воспользоваться единицами vh и vw . Например, если высота окна браузера равна 900px , то 1vh будет равен 9px . Аналогично, если ширина окна браузера равна 1600px , то 1vw будет равен 16px .

1.1. Адаптивное полноэкранное фоновое изображение

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

Fullscreen-bg { background: url(image.jpg); background-position: center; background-size: cover; width: 100%; height: 100vh; } Рис. 2. Адаптивно полноэкранное фоновое изображение

1.2. Эффект полностраничного слайда

Чтобы сделать блок на всю высоту окна браузера, необходимо задать height: 100%; для трёх элементов — html, body и непосредственно для самого блока:

Html, body { height: 100%; } section { height: 100%; }

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

Section { height: 100vh; }

Эффект перелистывания слайдов при клике на стрелку реализуется с помощью небольшого скрипта jQuery:

JQuery(document).ready(function($) { $("nav").on("click", function() { if ($(this).hasClass("down")) { var movePos = $(window).scrollTop() + $(window).height(); } if ($(this).hasClass("top")) { var movePos = $(window).scrollTop() - $(window).height(); } $("html, body").animate({ scrollTop: movePos}, 600); }); });

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

Я упоминала новые (относительно) единицы измерения. Эти единицы – vw, vh, vmin и vmax, они основаны на размере вьюпорта браузера. Их фактический размер меняется в зависимости от изменения области просмотра браузера, что делает эти единицы идеальными для адаптивного дизайна. Хотя в моем предыдущем посте я выступила против использования этих единиц для указания размеров шрифта, они могут быть очень полезны для работы с элементами макета.

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

Единицы измерения viewport являются относительными единицами, это означает что они не могут быть измерены объективно. Их размер определяется размером области просмотра в браузере. Существуют четыре единицы, относящиеся к области просмотра.

Я сконцентрирую внимание на первых двух, так как они наиболее часто используются. Во многих случаях единицы viewport (vh и vw) пересекаются с процентами в плане возможностей. Тем не менее, каждая из них имеет свои сильные и слабые стороны.

Если резюмировать, то получится следующее:

Когда имеешь дело с шириной, то лучше подходят %, а если с высотой, то лучше vh.

Элементы во всю ширину страницы: % > vw

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

Если ширина страницы превышает ширину viewport, то появляется полоса прокрутки. Однако на деле ширина viewport больше, чем ширина элемента html

Viewport > html > body

Поэтому если вы установите ширину элемента в 100vw, то элемент выйдет за пределы html и body. в данном примере я сделала красную границу вокруг элемента html и залила разделы разными цветами.

Из-за этого нюанса делать элементы на всю ширину страницы лучше при помощи процентов, а не опираясь на ширину viewport.

Элементы на всю высоту страницы: vh > %

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

Используя vh добиться такого эффекта достаточно просто:

Example { height: 100vh; }

Вне зависимости от того как как вложен элемент.example его размеры могут быть заданы относительно размеров области просмотра. Проблема прокрутки не потревожит нас так как большинство сайтов не имеют горизонтального скроллбара

Вот несколько примеров того, как можно использовать единицы измерения vh.

Полноэкранные фоновые изображения

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

Bg { position: relative; background: url("bg.jpg") center/cover; width: 100%; height: 100vh; }

Аналогичным образом мы можем сделать эффект «страниц», задав каждому разделу размеры области просмотра.

Section { width: 100%; height: 100vh; }

Мы можем использовать JavaScript чтобы создать иллюзию перелистывания страниц.

$("nav").on("click", function() { if ($(this).hasClass("down")) { var movePos = $(window).scrollTop() + $(window).height(); } if ($(this).hasClass("up")) { var movePos = $(window).scrollTop() - $(window).height(); } $("html, body").animate({ scrollTop: movePos }, 1000); })

Складывающееся изображение

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

Нам понадобится следующий код

Img { width: auto; /* Автоматическая ширина для пропорциональности высоты */ max-width: 100%; /* Не больше ширины родительского элемента */ max-height: 90vh; /* Не превышая высоту viewport */ margin: 2rem auto; }

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

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

Вот как их можно решить.

Единицы измерения CSS используются для указания величины в различных свойствах. Они делятся на абсолютные и относительные.

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

К абсолютным единицам измерения относятся сантиметры (cm), миллиметры (mm) и дюймы (in). Не смотря на то, что они предназначены для одинакового отображения элементов на веб-странице, браузер не всегда может точно вычислить физический размер дисплея или монитора, поэтому на разных устройствах элементы могут иметь разные размеры.

One-cm { font-size: 1cm; } .one-mm { font-size: 1mm; } .one-in { font-size: 1in; }

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

Типографские единицы

К типографским единицам измерения относятся точки (pt) и пики (pc). Точка (1pt) имеет фиксированный размер 1/72 дюйма, в то время как пика (1pc) равна 1/6 дюйма (1pc = 12pt). Эти две единицы измерения наиболее полезны в стилях, написанных для печатных версий документов, а не для использования на экранах.

One-point { font-size: 1pt; } .one-pica { font-size: 1pc; }

Относительные единицы

К относительным единицам измерения относятся пиксели (px) и проценты (%). Процент - единица измерения, не имеющая напрямую никакого отношения к размеру шрифта в элементе или к размеру самого элемента. Величина свойства, установленная в процентах, напрямую зависит от величины этого же свойства, установленного для родительского элемента. Например, размер шрифта задается относительно размера шрифта родительского элемента, также высота и ширина выражается в процентах относительно высоты и ширины области содержимого родительского элемента.

One-pixel { font-size: 1px; } .one-percent { font-size: 1%; }

Пиксель - точка равная одному физическому пикселю на экране. Однако браузеры не всегда точно расчитывают размер области просмотра в пикселях.

Рассмотрим последние модели ноутбуков, планшетов и смартфонов, оснащенные экранами с высоким разрешением. На таких устройствах браузер не соотносит единицу px с количеством физических пикселей на экране. Вместо этого он нормализует единицу px, так чтобы приблизить характеристики просмотра к традиционному настольному монитору с плотностью пикселей в районе от 96 до 120 пикселей/дюйм. В результате квадрат со стороной в 10px может отрисовыватся браузером на смартфоне так, что на каждой стороне окажется от 15 до 20 физических пикселей. Это означает, что px также оказывается относительной единицей измерения.

Шрифтозависимые относительные единицы

Двумя дополнительными относительными единицами измерения являются em и ex. Em - высота текущего шрифта, ex - высота символа "х" в нижнем регистре указанного шрифта.

One-ex { font-size: 1ex; } .one-em { font-size: 1em; }

Как и проценты, em является распространенной единицей измерения, которую обычно используют для установки размера шрифта для текста на веб-странице.

В CSS3 введены две дополнительные единицы измерения: rem и ch. Rem - размер шрифта корневого элемента (), она может использоваться вместо em для предотвращения влияния размеров шрифта родителя или предков на размер шрифта текущего элемента.

One-rem { font-size: 1rem; }

Единица ch равна ширине символа ноль (0) шрифта элемента. Ее использование может быть полезным для определения ширины поля, содержащего текст, потому что 1ch примерно соответствует одному символу.

Единица ch поддерживается только в Chrome 27+, Firefox 19+ и IE9. Rem поддерживается в Chrome 4+, Firefox 3.6+, IE9+, Safari 4.1+ и Opera 11.6+.

Единицы области просмотра

К единицам измерения области просмотра относятся vw (ширина) и vh (высота), позволяющие масштабировать элементы относительно области просмотра, то есть видимой части веб-страницы.

Width: 50vw; /* 50% от ширины области просмотра */ height: 25vh; /* 25% от высоты области просмотра */

Двумя дополнительными единицами являются vmin и vmax, которые задают минимальное или максимальное значение размера области просмотра.

Width: 1vmin; /* 1vh или 1vw, в зависимости от того что меньше */ height: 1vmax; /* 1vh или 1vw, в зависимости от того что больше */

Единицы измерения относительные области просмотра поддерживаются в Chrome 26+, Firefox 19+, IE11+, Safari 6.1+ и Opera 15+.

Значения единиц измерения

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

P { font-size: 0.394in; } /* десятичная дробь */ p { margin: -1px; } /* отрицательное значение */

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

P { font-size: 1ex; } /* корректно */ p { font-size: 0; } /* корректно */ p { font-size: 0ex; } /* корректно */ p { font-size: 1 ex; } /* неправильно */ p { font-size: 1; } /* неправильно */

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

Единицы измерения CSS играют важную роль в создании сайтов и задании размеров различных элементов. Значения CSS могут быть выражены положительными или отрицательными числами, хотя некоторые свойства принимают только положительные числа. Числовое значение сопровождается двухбуквенной аббревиатурой, которая обозначает фактическую единицу длины. Например, cm (сантиметры ), px (пиксели ) или em CSS . Исключением из этого правила является значение 0 (ноль ), для которого не требуется указывать единицу измерения.

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

Абсолютные единицы измерения длины в CSS

Абсолютные единицы измерения CSS не подходят для веб-дизайна. Они представляют собой цифровое обозначение результатов измерений в физическом мире и не зависят от размера и разрешения экрана. Абсолютные длины с одним и тем же значением могут отличаться на разных экранах. Это вызвано различием DPI экрана (точек на дюйм ).

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

Абсолютные единицы измерения длины:

• cm (сантиметры );
• mm (миллиметры );
• in (дюймы );
• pc (пики );
• pt (пункты );
• px (пиксели ).

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

Относительные единицы измерения длины в CSS

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

Относительные единицы, зависящие от шрифта

Относительные единицы измерения, зависящие от шрифта, ссылаются на заранее установленный размер шрифта или значение свойства font-family :

• ex (высота символа x );
• ch (ширина символа ноль (0) );
• единица измерения em в CSS (высота шрифта текущего элемента );
• rem (размер шрифта корневого элемента ).

ex

Определяется как “высота символа x текущего шрифта ИЛИ половина 1 em ”. То есть высота строчной буквы x установленного шрифта. При изменении значения свойства font-family единица измерения ex изменяется.

ch

Равна ширине символа 0 . Эта единица измерения также меняется при изменении значения свойства font-family .

em

Единица измерения em CSS имеет значение, равное размеру шрифта основного или родительского элемента. Например, если размер шрифта родительского элемента 30px , то значение 1em будет вычисляться как 30px (30 х 1 ) для всех дочерних элементов. Число не обязательно должно быть целым. Если в примере заменить 1em на 0,5, то значение будет 15px (30 х 0,5 ).

Единица измерения em принимает значение родительского тега. Это может привести к нежелательным результатам при использовании вложенных друг в друга элементов.

Допустим, что у нас есть три вложенных друг в друга элемента. Первый элемент (корневой ) имеет размер шрифта 30px , а два вложенных элемента — шрифт в 2em . Элемент, вложенный в корневой, будет иметь размер шрифта, вычисляемый как 60px (30 х 2 ). А элемент, вложенный в него, будет иметь размер шрифта, вычисляемый как 120px (60 х 2 ).

rem

rem подобна em CSS , но ее значение всегда остается равным размеру шрифта корневого элемента. Единица измерения rem пригодится при разработке адаптивных сайтов, потому что позволяет масштабировать всю страницу, изменив размер шрифта в HTML-элементе .

Процентные единицы измерения длины, зависящие от размеров области просмотра

Область просмотра основывается на ширине и высоте окна просмотра и включает в себя:

• vh (высота окна просмотра );
• vw (ширина окна просмотра );
• vmin (наименьшее из (vw, vh ) );
• vmax (наибольшее из (vw, vh ) ).

vw

Это ширина области просмотра. 1vw равен 1/100 ширины окна просмотра. Немного похоже на проценты, за исключением того, что значение остается неизменным для всех элементов независимо от ширины их родительских элементов. Например, если ширина окна 1000px , то 1vw будет равен 10px .

vh

То же самое, что и vw (ширина окна просмотра ), только данная единица измерения зависит от высоты области просмотра. 1vh равен 1/100 высоты просмотра. Например, если высота окна браузера 900px , то 1vh будет 9рх .

vmin

Vmin равно 1/100 от минимального значения между высотой и шириной области просмотра. Другими словами, 1/100 стороны с наименьшей длиной. Например, если размеры окна 1200 на 800 пикселей , то значение vmin будет равно 8px .

vmax

vmax равно 1/100 от максимального значения между высотой и шириной окна просмотра. Другими словами, 1/100 стороны с наибольшей длиной. Например, если размеры были 1200 на 800 пикселей , то vmax равно 12px .

Проценты %

Расстояние, заданное в процентах, зависит от длины родительского элемента. Например, если родительский элемент шириной 1000px , а его дочерний элемент — 50% от этого значения, то ширина дочернего элемента будет 500px .

ПОДДЕРЖКА БРАУЗЕРАМИ

em CSS, ex, px, cm, mm, in, pt, и pc

поддерживаются во всех браузерах, в том числе и в старых версиях IE .