В современном CSS существует несколько методов стилизации размеров заголовков. Вот некоторые часто используемые подходы:

1. Использование свойства font-size: вы можете напрямую установить свойство font-sizeэлемента заголовка для достижения желаемого размера. Например:

h1 {
  font-size: 2rem;
}
h2 {
  font-size: 1.5rem;
}
h3 {
  font-size: 1.2rem;
}

2. Использование фреймворков CSS. Фреймворки CSS, такие как Bootstrap или Tailwind CSS, предоставляют предопределенные классы для заголовков разных размеров. Эти платформы также часто предлагают различные варианты реагирования.

3. Использование относительных единиц: вместо использования фиксированных размеров вы можете использовать относительные единицы, такие как em, remили %, чтобы сделать размеры заголовков более гибкими и отзывчивыми. Например:

h1 {
  font-size: 2rem;
}
h2 {
  font-size: 1.5rem;
}
h3 {
  font-size: 1.2rem;
}

@media (max-width: 768px) {
  h1 {
    font-size: 1.5rem;
  }

  h2 {
    font-size: 1.2rem;
  }

  h3 {
    font-size: 1rem;
  }
}

4. Масштабирование с помощью переменных CSS. Вы можете определить переменные CSS для размеров заголовков и настроить их в соответствии со своими потребностями. Это позволяет упростить глобальные изменения. Вот пример:

:root {
  --heading1-size: 2rem;
  --heading2-size: 1.5rem;
  --heading3-size: 1.2rem;
}
h1 {
  font-size: var(--heading1-size);
}
h2 {
  font-size: var(--heading2-size);
}
h3 {
  font-size: var(--heading3-size);
}