В 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 |
@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;
}<!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>
Различие заключается в наследовании . 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 |
@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;
}<!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>
Рекомендуемые материалы:
Википедия: