Объясните разницу между единицами px, %, em и rem в CSS.

В CSS существует несколько единиц измерения, которые используются для задания размеров шрифтов, отступов, границ и других элементов. Наиболее распространённые единицы — это px, %, em и rem. Давайте подробно рассмотрим каждую из них.

1. Пиксели (px)

Пиксель — это фиксированная единица измерения, соответствующая точке на экране. Она не изменяется в зависимости от других параметров и размеров шрифтов. Пример использования:

.box {
    width: 200px; /* Ширина 200 пикселей */
    height: 100px; /* Высота 100 пикселей */
    font-size: 16px; /* Размер шрифта 16 пикселей */
}

Преимущества:

• Правильно отображается независимо от настроек пользователя.

Недостатки:

• Не поддерживает адаптивность; на разных устройствах размеры будут отображаться одинаково.

2. Проценты (%)

Проценты используются для задания размера, относительно родительского элемента. Например, если родительский элемент имеет ширину 400 пикселей, а дочерний элемент задан с шириной 50%, то его ширина будет 200 пикселей (50% от 400 пикселей).

.container {
    width: 400px;
}

.box {
    width: 50%; /* Ширина будет 50% от ширины родителя */
}

Преимущества:

• Легко адаптируется к изменению размеров родительских элементов.

Недостатки:

• Может быть сложно контролировать абсолютные размеры, если не знаешь размеры родителя.

3. em

Эта единица измерения основывается на размере шрифта родительского элемента. То есть, 1em равен размеру шрифта родителя. Если родительский элемент имеет размер шрифта 20px, то 2em будет равно 40px.

.parent {
    font-size: 20px;
}

.child {
    font-size: 2em; /* 2 * 20px = 40px */
}

Преимущества:

• Легко изменять размеры относительно родительского элемента, что полезно для создания иерархии текста.

Недостатки:

• Может вызвать цепочку зависимостей при вложенных элементах, что иногда приводит к неожиданным результатам.

4. rem

rem (root em) — это единица, которая относится к размеру шрифта корневого элемента (обычно html). Например, если размер шрифта в html установлен на 16px, то 1rem будет равен 16px, и 2rem будет равен 32px.

html {
    font-size: 16px;
}

.box {
    font-size: 2rem; /* 2 * 16px = 32px */
}

Преимущества:

• Упрощает поддержание единообразия размеров по всему документу, так как всё относительно одного корневого элемента.

Недостатки:

• Локальные изменения относительно родителя не влияют на rem, что может быть как плюсом, так и минусом.

Заключение

Понимание разницы между px, %, em и rem поможет вам лучше управлять размерами элементов на странице и создавать адаптивные интерфейсы. Использование правильных единиц в зависимости от ситуации — ключ к профессиональному подходу в разработке.