Абсолютные и относительные.
Какие единицы измерения существуют в CSS?
Абсолютные и относительные.
Короткий ответ
Что ответить на собеседовании
Подробный разбор
Ответ с пояснениями
Абсолютные и относительные.
| Тип | Единица | Описание |
|---|---|---|
| Абсолютные | px |
Пиксели, зависят от разрешения экрана. |
pt |
Пункты, 1/72 дюйма. | |
cm |
Сантиметры. | |
mm |
Миллиметры. | |
in |
Дюймы, 1 дюйм = 2.54 см. | |
pc |
Пика, 1 пика = 12 пунктов. | |
| Относительные | em |
Относительно размера шрифта родительского элемента. |
rem |
Относительно размера шрифта корневого элемента (html). |
|
vw |
Относительно 1% ширины вьюпорта. | |
vh |
Относительно 1% высоты вьюпорта. | |
vmin |
Относительно 1% наименьшей стороны вьюпорта (ширина или высота). | |
vmax |
Относительно 1% наибольшей стороны вьюпорта (ширина или высота). | |
% |
Относительно размера родительского элемента (или содержащего блока). | |
ch |
Относительно ширины символа '0' текущего шрифта. | |
ex |
Относительно высоты строчных букв (x-height) текущего шрифта. |
Выбор единицы зависит от контекста: px часто используется для границ и растровых изображений, rem и em – для шрифтов и отступов, обеспечивая лучшую масштабируемость на разных устройствах. Процентные значения полезны для отзывчивых макетов.
/* Пример использования */
.container {
width: 80%; /* Относительно родителя */
margin: 1rem auto; /* Относительно размера шрифта html */
}
.box {
padding: 20px; /* Абсолютное значение */
font-size: 1.2em; /* Относительно размера шрифта родителя */
width: 50vw; /* Относительно ширины вьюпорта */
}