Как связан размер шрифта в rem с шириной контейнера

Размер шрифта в rem зависит от корневого font-size (обычно html), который по умолчанию равен 16px. Если контейнер имеет width в rem, оба значения масштабируются относительно корневого font-size.

Пример:

html {
  font-size: 16px; /* 1rem = 16px */
}

.container {
  width: 20rem; /* 320px (20 * 16) */
  font-size: 1.5rem; /* 24px (1.5 * 16) */
}

Если изменить корневой font-size, оба значения (width и font-size) масштабируются пропорционально. Это полезно для адаптивного дизайна, особенно при использовании медиа-запросов.

Важно: rem не привязан напрямую к ширине контейнера, но оба зависят от корневого font-size.