Урок 14 · CSS

px, rem, em и проценты без путаницы

Пиксель привязан к экрану. rem привязан к корневому размеру и уважает настройки человека. Процент считается от родителя.

Почему это следующий шаг

Наследование уже раздало шрифт. Теперь размеры должны расти вместе с ним, а не застыть.

Как сделать

Для текста бери rem: 1rem обычно равен 16px, пока человек не увеличил шрифт. Для мелкого внутреннего зазора иногда уместен em. Ширину колонки часто задают в процентах или через fr в сетке. Не ставь всю типографику в пикселях: при увеличении шрифта в браузере макет не должен разваливаться только потому, что текст упёрся в тесную кнопку.

h1 { font-size: 2.2rem; }
.card { width: min(100%, 36rem); padding: 1rem; }

Что проверить

• При увеличении шрифта до 200% текст не обрезан.
• Ширина карточки не больше экрана.
• Отступы и размер текста используют одну шкалу, а не случайные 13px и 17px.