В чем разница между значениями величин в CSS?

Разница между единицами измерения в CSS

В CSS существует множество единиц для измерения размеров, расстояний и других значений. Каждая единица имеет свой контекст использования.

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

Абсолютные единицы имеют фиксированный размер, независимо от контекста:

/* Пиксели (px) - самая распространённая абсолютная единица */
.button {
  width: 200px;         /* Ровно 200 пикселей */
  padding: 10px;        /* Ровно 10 пикселей */
  border-radius: 5px;   /* Ровно 5 пикселей */
}

/* Сантиметры, миллиметры и дюймы */
.document {
  width: 21cm;          /* 21 сантиметр */
  height: 29.7cm;       /* 29.7 сантиметра (A4) */
  margin: 1in;          /* 1 дюйм */
}

/* Пункты (pt) - используются в типографике */
.text {
  font-size: 12pt;      /* Размер шрифта 12 пунктов */
}

/* Пика (pc) */
.element {
  margin: 2pc;          /* 2 пики */
}

Когда использовать: Абсолютные единицы практически не рекомендуются для веб-дизайна, так как они не адаптируются к размеру экрана.

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

Относительные единицы зависят от других значений (размер шрифта, размер viewport, размер контейнера).

em - относительно размера шрифта элемента

.parent {
  font-size: 16px;
}

.parent .child {
  font-size: 1.5em;     /* 16px * 1.5 = 24px */
  padding: 1em;         /* 24px * 1 = 24px (относительно font-size этого элемента) */
}

.parent .child .nested {
  font-size: 1em;       /* 24px (наследуется от .child) */
  margin: 0.5em;        /* 24px * 0.5 = 12px */
}

Проблема em: Может быть непредсказуемым в глубоко вложенных элементах.

rem - относительно размера шрифта корневого элемента

/* В HTML корневой элемент - html */
html {
  font-size: 16px;      /* Стандартный размер */
}

body {
  font-size: 1rem;      /* 16px */
}

.section {
  padding: 2rem;        /* 32px (всегда относительно html) */
  font-size: 1.25rem;   /* 20px */
}

.section .title {
  font-size: 1.5rem;    /* 24px */
  margin-bottom: 1rem;  /* 16px (всегда относительно html!) */
}

Преимущество rem: Непредсказуемость исключена - всё относится к корневому элементу.

Процент (%)

.container {
  width: 1200px;
}

.container .row {
  width: 100%;          /* 1200px */
}

.container .col {
  width: 50%;           /* 600px */
}

/* Для шрифта - относительно размера родителя */
html {
  font-size: 16px;
}

body {
  font-size: 100%;      /* 16px */
}

body .text {
  font-size: 125%;      /* 20px */
}

Единицы viewport

Эти единицы зависят от размера окна браузера.

/* vw - ширина viewport */
.hero {
  width: 100vw;         /* Вся ширина экрана */
  height: 50vh;         /* Половина высоты экрана */
}

/* vmin и vmax - минимум и максимум между шириной и высотой */
.square {
  width: 50vmin;        /* 50% от меньшей стороны */
  height: 50vmin;
}

.element {
  font-size: 5vmax;     /* 5% от большей стороны */
}

/* vi и vb - логические единицы */
.box {
  width: 100vi;         /* Ширина в inline направлении */
  height: 100vb;        /* Высота в block направлении */
}

Осторожно с vh: В мобильных браузерах vh может вести себя неожиданно из-за скрытия адресной строки.

Единицы контейнера (Container queries)

Новые современные единицы для адаптивности:

/* Определяем контейнер запросов */
.container {
  container-type: inline-size;
}

/* Используем единицы контейнера */
.card {
  width: 100cqw;        /* 100% ширины контейнера запросов */
  padding: 2cqw;        /* 2% ширины контейнера запросов */
  font-size: 4cqh;      /* 4% высоты контейнера запросов */
}

/* Контейнерные запросы */
@container (min-width: 700px) {
  .card {
    width: 50cqw;       /* 50% ширины контейнера */
  }
}

Сравнительная таблица

Практический пример

/* Хорошая структура масштабирования */
html {
  font-size: 16px;      /* Базовый размер */
}

body {
  font-size: 1rem;      /* 16px */
  line-height: 1.5;     /* 24px */
  margin: 0;
  padding: 0;
}

/* Используем rem для отступов */
.container {
  max-width: 1200px;    /* Фиксированная ширина */
  margin: 0 auto;
  padding: 2rem;        /* 32px */
}

.section {
  margin-bottom: 3rem;  /* 48px */
}

.section h2 {
  font-size: 2rem;      /* 32px */
  margin-bottom: 1rem;  /* 16px */
}

.section p {
  font-size: 1rem;      /* 16px */
  margin-bottom: 1.5rem; /* 24px */
}

/* Используем em для отступов внутри компонента */
.button {
  font-size: 1rem;      /* Наследует от родителя */
  padding: 0.5em 1em;   /* Зависит от font-size кнопки */
  border-radius: 0.25em; /* Зависит от font-size кнопки */
}

.button.large {
  font-size: 1.25rem;   /* 20px */
  padding: 0.5em 1em;   /* 10px 20px */
}

/* Используем процент для адаптивных сеток */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 3 колонки по 33.33% */
}

@media (max-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr); /* 2 колонки по 50% */
  }
}

/* Используем vh для высокого контента */
.hero {
  height: 100vh;        /* Во весь экран */
  display: flex;
  align-items: center;
  justify-content: center;
}

Лучшие практики

1. Используйте rem для глобальных отступов - это делает масштабирование предсказуемым
2. Используйте em для компонентов - они масштабируются вместе со своим размером
3. Избегайте px - это не адаптируется к изменениям размера шрифта пользователя
4. Используйте % для ширины контейнеров - это обеспечивает отзывчивость
5. Осторожно с vh - может быть проблематично на мобильных устройствах
6. Тестируйте изменение размера шрифта - убедитесь, что сайт адаптируется

Правильный выбор единиц измерения - основа создания адаптивного и доступного веб-дизайна.