< H / $ > Хак/Собесов

Перейти на PRO

Может ли размер текста быть зависим от размера блока в который он вложен

«Может ли размер текста быть зависим от размера блока в который он вложен» — вопрос из категории CSS, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Тип вопроса: CSS Вероятность: 10% Категория: Frontend Разработчик

Ответ

Да, размер текста может динамически подстраиваться под размер блока с помощью CSS-свойства font-size в комбинации с относительными единицами измерения или CSS-функций. Например:

Viewport units (vw/vh) – текст масштабируется относительно ширины/высоты viewport:

.block {
  font-size: 3vw; /* 3% от ширины viewport */
}

CSS clamp() – позволяет задать минимальный, предпочтительный и максимальный размер:

.block {
  font-size: clamp(1rem, 2.5vw, 2rem);
}

JavaScript – можно отслеживать изменения размера блока через ResizeObserver и менять font-size динамически.

Важно: чрезмерное масштабирование может ухудшить читаемость. Всегда проверяйте контраст и адаптивность на разных экранах.