Урок 13. Ошибки: Единицы измерения в CSS

📁 Раздел: Основы CSS ⏱️ Время изучения: ~40 мин 🎯 Сложность: Начальная
#min #max #clamp

⚡ Кратко

Три главные ловушки единиц: em накапливается во вложенности, px ломает зум и доступность, фиксированная ширина рвёт мобильный экран.

Типичные ошибки

1. em накапливается во вложенности

Как ломается: каждый уровень умножает em на em. Список из вложенных элементов с font-size: 1.4em «разгоняется» — текст становится всё крупнее.

Уровень 0 (16px)
Уровень 1 → 22px
Уровень 2 → 31px
Уровень 3 → 44px 😱
li { font-size: 1.4em; }  /* умножается на каждом уровне */

Как правильно: для шрифта берите rem — он всегда считается от корня и не накапливается.

Уровень 0
Уровень 1 → 22px
Уровень 2 → 22px
Уровень 3 → 22px ✅
li { font-size: 1.4rem; }  /* всегда 1.4 × 16 = 22px */

2. px ломает зум и доступность

Как ломается: размеры в px не реагируют на увеличение шрифта в настройках браузера — пользователь со слабым зрением не сможет увеличить текст.

/* при пользовательском зуме шрифта НЕ изменится */
.text { font-size: 14px; }

Как правильно: шрифт и отступы — в rem; они масштабируются вместе с настройками.

.text { font-size: 0.875rem; }  /* = 14px, но реагирует на зум */

3. Фиксированная ширина без max-width

Как ломается: width: 1200px вылезает за пределы телефона, появляется горизонтальная прокрутка.

.page { width: 1200px; }  /* рвёт мобильный экран */

Как правильно: резиновая ширина с потолком.

.page { width: 100%; max-width: 1200px; margin: 0 auto; }

4. Слишком много vw для текста

Как ломается: font-size: 5vw на широком мониторе делает буквы огромными, на узком — нечитаемо мелкими.

Как правильно: ограничьте через clamp().

h1 { font-size: clamp(2rem, 5vw, 4rem); }  /* с границами */