На этой странице

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

В CSS применяется несколько единиц измерения. Самая известная единица измерения – пиксели, но есть и другие единицы, которые не так популярны, но очень удобны в некоторых случаях использования.

Таблица рекомендуемых единиц в CSS

	Media	Рекомендуемые	Редкое использование	Нечастое использование	Не рекомендуется
	Экран	em, rem, %	px	ch, ex, vw, vh, vmin, vmax	cm, mm, in, pt, pc
	Для печати	em, rem, %	cm, mm, in, pt, pc	ch, ex	px, vw, vh, vmin, vmax

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

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

В большинстве браузеров размер шрифта по умолчанию равен 16px, вы можете использовать это значение в качестве основы для вычислений (например, 16 пикселей равно 1em, 1rem или 100%).

	Ед. изм	Описание
	%	Проценты
	em	Размер шрифта элемента (например, 2,5em означает, что шрифт в 2,5 раза больше обычного шрифта)
	rem	Размер шрифта корневого элемента документа
	ch	Ширина символа "0" в монофонических шрифтах, где все символы имеют одинаковую ширину, 1 канал равен 1 символу
	ex	x - Высота текущего шрифта, измеренная по высоте нижнего регистра x

Содержимое файла style.css

@charset "utf-8"
@media screen and (max-width: 767px) {
body {
    max-width: 767px;
    height auto;
}
}
body {
  font-family: 'Fira Code', monospace;
}
h2 {
font-family: "Verdana"
font-size: 1.8rem;
color: blue;
}
div {
  box-sizing: border-box;
  color: black;
  margin-bottom: 4px;
  padding: 4px;
  width: 400px;
}

.percent {
  font-size: 200%;
}

.em {
  font-size: 1em;
}

.rem {
  font-size: 1rem;
}

.ch {
  font-size: 1ch;
}

.ex {
  font-size: 1ex;
}

Содержимое файла index.html

<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Относительные единицы CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2>Относительные единицы CSS</h2>
    <div class="percent">font-size: 200%</div>
    <div class="em">font-size: 1em</div>
    <div class="rem">font-size: 1rem</div>
    <div class="ch">font-size: 1ch</div>
    <div class="ex">font-size: 1ex</div>
</body>
</html>

Открыть пример в новом окне

Различие между em и rem

Различие заключается в наследовании. rem - Значение основано на корневом элементе (html). Каждый дочерний элемент использует html размер шрифта в качестве основы для расчета.

em - Зависит от размера шрифта родительского элемента.

rem - Значительно упрощает расчет размера шрифта. При использовании вложенных элементов или даже нескольких вложенных элементов (например, списков) размер шрифта больше не нужно рассчитывать по отношению к размеру шрифта родительского элемента. rem всегда вычисляет размер шрифта относительно html тега.

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

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

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

Ед. изм	Описание	Размер
cm	Сантиметры	1 cm = 1 cm
mm	Миллиметры	10 mm = 1 cm
in	Дюймы	1 in = 96px = 2.54 cm
px	Пиксель	1 px = 1/96th of 1 in
pt	Пункт	1 pt = 1/72 of 1 in
pc	Пика	1pc = 12 pt

Содержимое файла style.css

@charset "utf-8"
@media screen and (max-width: 767px) {
body {
    max-width: 767px;
    height auto;
}
}
body {
  font-family: 'Fira Code', monospace;
}
h2 {
font-family: "Verdana"
font-size: 1.8rem;
color: blue;
}
.cm {
  background: purple;
  height: 1cm;
}

.mm {
  background: blue;
  height: 10mm;
}

.in {
  background: orange;
  height: 1in;
}

.pt {
  background: green;
  height: 72pt;
}

.px {
  background: deepskyblue;
  height: 96px;
}

.pc {
  background: lightcoral;
  height: 6pc;
}

Содержимое файла index.html

<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Абсолютные единицы</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2>Абсолютные единицы</h2>
    <div class="cm"><strong>Cантиметры:</strong>height = 1cm (1cm = 1cm)</div>
    <div class="mm"><strong>Миллиметры:</strong>height = 10mm (10mm = 1cm)</div>
    <div class="in"><strong>Дюймы:</strong>height = 1in (1in = 2.54cm)</div>
    <div class="pt"><strong>Пункт:</strong>height: 72pt (72pt = 1in = 2.54cm)</div>
    <div class="px"><strong>Пиксель:</strong>height: 96px (96px = 1in = 2.54cm)</div>
    <div class="pc"><strong>Пика:</strong>height: 6pc (6pc = 1in = 2.54cm)</div>
</body>
</html>

Открыть пример в новом окне

Рекомендуемые материалы:

Википедия:

class="blockquote-footer"> Единицы в CSS