> Какой опыт есть с масштабированием текста под разные экраны (JavaScript)

Короткий ответ

Основной опыт - использование CSS-техник: относительные единицы (rem, em, vw, %), clamp(), медиа-запросы, контейнерные запросы и подход mobile-first. Для сложных случаев применял кастомные хуки с debounce на window resize и IntersectionObserver. Важно не только адаптировать размер шрифта, но и пересматривать компоновку, чтобы текст оставался читаемым на всех устройствах без горизонтального скролла.

Подробное объяснение

Масштабирование текста под разные экраны - это не просто изменение font-size, а комплексная задача обеспечения читаемости и доступности. Основные подходы:

• Fluid typography с использованием clamp(): позволяет задать минимальный, предпочтительный и максимальный размер шрифта, который плавно меняется между breakpoints. Например, font-size: clamp(1rem, 2.5vw, 2rem).

• Relative units: rem для глобального масштабирования относительно корневого размера, em для локального (например, внутри компонента), vw для привязки к ширине вьюпорта.

• Media queries: классический подход для фиксированных breakpoints, но важно использовать их в сочетании с fluid-техниками, чтобы избежать резких скачков.

• Container queries: современный метод, позволяющий масштабировать текст относительно размера родительского контейнера, а не вьюпорта. Это особенно полезно для переиспользуемых компонентов.

• Viewport meta tag: обязательное условие - <meta name="viewport" content="width=device-width, initial-scale=1"> для корректной работы на мобильных.

• Accessibility: нельзя полагаться только на vw или clamp без fallback - пользователи могут менять базовый размер шрифта в браузере. Всегда проверяю, что текст масштабируется при zoom.

На практике

В реальных проектах я комбинирую несколько техник:

1. Глобальная типографика через CSS custom properties с clamp-значениями для заголовков и основного текста. Например:

   CSS
   :root {
     --font-size-h1: clamp(1.75rem, 4vw, 3rem);
     --font-size-body: clamp(1rem, 1.5vw, 1.25rem);
   }

2. Адаптивные компоненты с container queries: если карточка товара отображается в разных контекстах (сетка, список, карусель), текст внутри масштабируется относительно размера самой карточки.

3. Кастомный хук для динамического изменения font-size на основе ширины родителя (редко, только для специфических случаев вроде анимированных заголовков):

   JAVASCRIPT
   function useResponsiveFontSize(ref, options) {
     // debounced observer за изменением размера ref
   }

4. Тестирование на реальных устройствах и в DevTools с разными viewport и настройками доступности (увеличенный шрифт, zoom 200%).

Пример кода

CSS
/* Fluid typography с fallback */
h1 {
  font-size: 2rem; /* fallback для старых браузеров */
  font-size: clamp(1.5rem, 3vw + 1rem, 3rem);
  line-height: 1.2;
}

/* Container query для компонента */
.card {
  container-type: inline-size;
}

@container (max-width: 300px) {
  .card__title {
    font-size: 1rem;
  }
}

/* Mobile-first медиа-запросы */
body {
  font-size: 16px;
}

@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

Как отвечать на собеседовании

Начни с ключевых техник (clamp, relative units, container queries), затем приведи конкретный пример из опыта - как решал проблему с текстом, который ломал layout на планшетах. Упомяни trade-off между fluid и фиксированными breakpoints: fluid даёт плавность, но сложнее контролировать на крайних значениях. Подчеркни важность accessibility - текст должен масштабироваться при zoom и изменении базового размера шрифта. Если спросят про производительность, скажи, что clamp и container queries не влияют на reflow, а кастомные хуки с debounce - да, но их использование минимально.

Что проверяет интервьюер

• Понимание разницы между относительными и абсолютными единицами.
• Знание современных CSS-возможностей (clamp, container queries).
• Умение комбинировать техники для разных сценариев.
• Внимание к accessibility и производительности.
• Способность объяснить trade-off между подходами.

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

• Использование только vw без clamp - текст становится слишком мелким на узких экранах и огромным на широких.
• Игнорирование rem и базового размера шрифта - ломается accessibility при zoom.
• Жёсткие breakpoints без fluid-переходов - текст "прыгает" при изменении ширины.
• Забывают про line-height и letter-spacing - они тоже должны адаптироваться.
• Container queries без fallback для старых браузеров - нужно проверять поддержку.