Краткое руководство по единицам измерения в 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.

rem

Все используемые браузеры, включая IE9 +.

vw, vh, и vmin

Chrome 20+, IE 9 +, Firefox 19+, Safari 6+, Opera 20+. Internet Explorer поддерживает Vmin нестандартным синтаксисом vm.

Vmax

Chrome 20+, Firefox 19+ и 20+ Opera и Safari 6.1+. Нет поддержки в IE.

Перевод статьи “THE QUICK GUIDE TO CSS LENGTH UNITS” был подготовлен дружной командой проекта Сайтостроение от А до Я.