Css чему равен один ex. CSS вьюпорт единицы измерения: быстрый старт

В CSS3 появились новые единицы измерения. (Я, кажется, уже говорил об этом. eng ) Вы уже слышали о px, pt, em и новых rem. Давайте рассмотри еще несколько: vw и vh.

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

С помощью vw/vh мы можем устанавливать размер элементов относительно размера вьюпорта. Единицы vw/vh интересны тем, что 1vw - единица равная 1/100"ой ширины вьюпорта. Что бы присвоить элементу ширину, равную ширине вьюпорта, например, надо установить width:100vw.

Как это можно использовать

Лайтбоксы - прекрасный кандидат для использования vw и vh, так как обычно позиционируется относительно вьюпорта, однако мне кажется, что position:fixed со значениями top, bottom, left и right использовать проще, так как можно вообще не устанавливать высоту и ширину .

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

Img { max-height:95vh; }

В данном случае я устанавливаю высоту 95vh что бы оставить немного места вокруг, когда они на экране.

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

Если rem поддерживаются почти всеми основными браузерами включая IE9, то с использованием vw и vh стоит повременить. На данный момент их поддерживает только Internet Explorer 9.

Единицы измерения 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 объявление содержит ошибку, оно игнорируется браузером, при этом остальные объявление продолжают работать.

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

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

Определение em

В спецификации представлено довольно параметру em:

Равное вычисленному значению параметра font-size, примененного к элементу

Другими словами, если у нас будет следующий код CSS:

Element {
font-size: 20px;
}
Это означает, что 1em, установленное в том элементе или в любом из его дочерних элементах, будет равное 20 пикселям. .

Если вы используете следующий код:

Element {
font-size: 20px;
width: 4em;
height: 4em;
}
Это означает, что ширины и высота элемента (указанные здесь как 4em x 4em) будут составлять 80px x 80px (20px * 4 = 80 px).

Рассмотрим подробнее

Ключом к запоминанию является предназначение em и происхождение данного параметра. Следуя :

Em – это единица изменения в типографии, равное текущему указанному размеру шрифта. Название em связано с буквой M. Изначально данная единица была получена из ширины заглавной буквы М при использовании определенного шрифта

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

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

А что если я не использую параметр font-size?

В примере, приведенном выше, и в JSBin, на который мы сослались, точно указан параметр font-size. Единица em впоследствии выводится из параметра «base». Но что если в элементе не указан точный параметр font-size?

В таком случае, так как параметр font-size наследуется по всему древу документа, значение единицы em будет выведен из того параметра, который был унаследован. Если во всем документе ни разу не упоминается параметр font-size, то значение отдельной единицы em будет равным 16 пикселям, что является значением по умолчанию (и нам кажется, что это не различается во всех браузерах).

«rem» должен быть автоматическим для людей

Пришло время привлечь и новое добавление в CSS: . Данная единица (название получено от «root em») отлично поддерживается во всех браузерах: IE9+, FF3.6+, Chrome, Safari 5+ и Opera 11.6+.

В целом, данная единица очень проста к пониманию. Она дает вам возможность сделать так, чтобы значения единиц em во всем HTML-документе были основаны на одном «главном» значении, указанном в «html »-элементе. Таким образом, вы можете забыть про параметр font-size, так как все em-единицы, использованные в документе, будут основаны на главном значении rem, например:

Html { font-size: 62.5%; }
body { font-size: 1.4rem; } /* =14px */
h1 { font-size: 2.4rem; } /* =24px */
И, как и в случае с em, если вы не указываете значение font-size в «html »-элементе, то «главная» единица (root em) будет равна 16 пикселям по умолчанию.

Carpe di-em

Можно выдумать еще целую кучу выражений с em:)

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

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

Итак, надеемся, вам понравилось наше сегодняшнее руководство, и вы найдете применение полученным знаниям.

Не забываем комментировать!

Единицы измерения 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 .

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

Единицы измерения и их значение

В CSS есть 4 типа вьюпорт единиц: vh, vw, vmin и vmax.

Viewport height (vh) – основаны на высоте вьюпорта. Значение 1vh равно 1% высоты вьюпорта.

Viewport width (vw) – основаны на ширине вьюпорта. Значение 1vw равно 1% ширины вьюпорта.

Viewport minimum (vmin) – основаны на минимальной стороне вьюпорта. Если высота вьюпорта меньше ширины, значение 1vmin будет равно 1% от высоты. Точно так же если ширина меньше высоты, то 1vmin будет равен 1% от ширины вьюпорта.

Viewport maximum (vmax) – основаны на большой стороне вьюпорта. Если высота вьюпорта больше ширины, то значение 1vmax будет равно 1% от высоты вьюпорта. Если ширина вьюпорта больше высоты, то 1vmax будет равен 1% от ширины.

Давайте посмотрим, какие значения мы получим в разных ситуациях:

Если вьюпорт 1200px в ширину и 1000px в высоту, то значение 10vw будет равно 120px, а 10vh – 100px. Ширина вьюпорта больше высоты, поэтому 10vmax будет равно 120px, а 10vmin – 100px.

Если повернуть устройство, чтобы ширина стала 1000px, а высота 1200px, то 10vh будет равно 120px, а 10vw превратится в 100px. Интересно, но 10vmax так и останется 120px, потому что теперь значение определяется по высоте вьюпорта. Значение 10vmin также останется 100px.

Если сузить окно браузера до 1000px в ширину и 800px в высоту, то 10vh будет 80px, а 10vw будет 100px. Точно так же значение 10vmax станет 100px, и 10vmin – 80px.

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

В демо видно, как ширина первого дочернего элемента занимает 80% ширины от родителя. У второго дочернего элемента ширина равна 80vw, что делает его шире родителя.

Применение вьюпорт единиц измерения

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

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

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

Разберем следующий пример HTML: