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

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

Единицы измерения длины и расстояния

Единицы измерения применяются для смещение тени, размер и расстояние шрифтов, толщина границ и т.д. Вот какие единицы измерения длины и расстояния применяются в CSS. Их довольно много.

к меню ↑

Абсолютная длина

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

к меню ↑

px

.wrap {
  width: 400px; 
}

Пиксель всё еще каноническое измерение в интернете, даже JavaScript обрабатываются в пикселях.

к меню ↑

in

.wrap {
  width: 4in; 
}

Дюймы физическое измерение для CSS. Я один раз видел практическое использование дюймов для физических измерений в CSS.

1in == 96px
к меню ↑

cm

.wrap {
  width: 20cm; 
}

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

1cm == 37.8px
к меню ↑

mm

.wrap {
  width: 200mm; 
}

Расстояние в десять раз меньше …

1mm == 0.1cm == 3.78px
к меню ↑

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

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

к меню ↑

Em

.wrap {
  width: 40em; 
}

Соотношения для CSS:

1em == 16px == 0.17in == 12pt == 1pc == 4.2mm == 0.42cm
к меню ↑

Rem

.wrap {
  width: 40rem; 
}

Как и em, но rem всегда относится к корневому элементу (т.е.. :root {}), и не с помощью каскада, как это делает em . Это значительно упрощает работу с относительными единицами измерения длины и расстояния. Rem помогают при адаптивном дизайне.

Известные проблемы поддержки браузеров: не работает в IE 8, Safari 4 или IOS 3.2. поэтому делаем резерв в px.

к меню ↑

Points

.wrap {
  width: 120pt; 
}

Дело в том, физическое измерение равно 1/72 дюйма. Points является наиболее распространенным типом размера за пределами CSS (возможно, поэтому он имеет поддержку и в CSS).

Points лучше всего подходят для физических носителей, но ничто не мешает вам использовать pt для screen media.

к меню ↑

Pica

.wrap {
  width: 12pc; 
}

Та же история как с points, только: 1pc == 12pt.

к меню ↑

ex

.wrap {
  width: 60ex;
}

Это измерение на основе x-height текущего шрифта. Иногда информация поступает в браузер из самого шрифта, и браузер понимает это путем измерения символа нижнего регистра, и в худшем случае, он устанавливается в 0.5em. Это называется x-height потому что он основан по высоте x.

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

к меню ↑

ch

.wrap {
  width: 60ch;
}

Это похоже на x-height, только канал основан в ширину, ноль (0) вместо высоты символа х. Он также изменяет семейство шрифтов.

к меню ↑

Длина Viewport

Длина Viewport для настройки разметки.

к меню ↑

vw

.wrap {
  width: 10vw;
}

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

Известные проблемы поддержки браузеров: Нет поддержки в любых мобильных браузерах, кроме самой последней IOS 6.

к меню ↑

vh

.wrap {
  width: 10vh;
}

Это так же, как vw (ширина окна) блока, основан только на высоту просмотра.

к меню ↑

vmin

.wrap {
  width: 20vmin;
}

Это значение будет в зависимости от того какой smaller в данный момент, vm или vh. В стандартном случае использования типов размеров, может быть более полезен чем vm или vh в определении истинного размера экрана.

к меню ↑

vmax

.wrap {
  width: 20vmax;
}

Это значение будет в зависимости от того какой larger на данный момент, vm или vh.
Известные проблемы поддержки браузеров: WebKit браузеры поддерживают только Vmin, а не Vmax (пока).

к меню ↑

Процент

.wrap {
  width: 50%; 
}

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

Общая информация: процент технически не является единицей длины, но процент связаны с этой темой.

к меню ↑

Для браузеров

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

<div id="percentage">50% — percentage</div>
<div id="pixel">400px — pixels (device pixels)</div>
<div id="em">20em — relative unit</div>
<div id="rem">20rem — root em</div>
<div id="vw">15vw — viewport width</div>
<div id="vh">60vh — viewport height</div>
<div id="vmin">60vmin — smaller of vw or vh</div>
<div id="vmax">60vmax — larger of vw or vh</div>
<div id="inch">4in — inches</div>
<div id="cm">20cm — centimeters</div>
<div id="mm">200mm — millimeters</div>
<div id="pt">120pt — points</div>
<div id="pc">40pc — picas</div>
<div id="ex">60ex — x-height</div>
<div id="ch">60ch — based on width of zero (0) character</div>

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

var percentage = $("#percentage").css("width", "50%");
if (percentage.width() == 0) percentage.addClass("fail");
var pixel = $("#pixel").css("width", "400px");
if (pixel.width() == 0) pixel.addClass("fail");
var em = $("#em").css("width", "20em");
if (em.width() == 0) em.addClass("fail");
var rem = $("#rem").css("width", "20rem");
if (rem.width() == 0) rem.addClass("fail");
var vw = $("#vw").css("width", "15vw");
if (vw.width() == 0) vw.addClass("fail");
var vh = $("#vh").css("width", "60vh");
if (vh.width() == 0) vh.addClass("fail");
var vmin = $("#vmin").css("width", "60vmin");
if (vmin.width() == 0) vmin.addClass("fail");
var vmax = $("#vmax").css("width", "60vmax");
if (vmax.width() == 0) vmax.addClass("fail");
var inch = $("#inch").css("width", "4in");
if (inch.width() == 0) inch.addClass("fail");
var cm = $("#cm").css("width", "20cm");
if (cm.width() == 0) cm.addClass("fail");
var mm = $("#mm").css("width", "200mm");
if (mm.width() == 0) mm.addClass("fail");
var pt = $("#pt").css("width", "120pt");
if (pt.width() == 0) pt.addClass("fail");
var pc = $("#pc").css("width", "40pc");
if (pc.width() == 0) pc.addClass("fail");
var ex = $("#ex").css("width", "60ex");
if (ex.width() == 0) ex.addClass("fail");
var ch = $("#ch").css("width", "60ch");
if (ch.width() == 0) ch.addClass("fail");