Cacher is the code snippet organizer for pro developers

Настройка адаптивности в Bootstrap 5

Настройка размеров контейнеров

По умолчанию в бутстрапе все контейнеры, кроме мобильного в вертикальном положении настроены на ограниченную высоту, это не удобно. Меняем ширину контейнера до lg в 100%

Было:

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
) !default;

Стало:

$container-max-widths: (
  sm: 100%,
  md: 100%,
  lg: 100%,
  xl: 1140px
) !default;

Минус данного решения отсутствие отступов у строк!

Размеры шрифтов и отступов

Как правило шрифт на мобильных устройствах примерно в 1,5 раза меньше чем на дэсктопе. К примеру шрифт на десктопе 16px, а на мобильном 12px. Соответсвенно размеру основного шрифта должны уменьшиться и размеры заголовков, крупного текста и т.п.

Пример

У нас есть базовый размер текста заданный для корневого элемента :root как правило 16px = 1rem

Размер заголовков h2 = 36px, вычесляем 36px/16px = 2.25rem Интерляж текста 27px = 1.6875rem Отступ параграфа 32 = 2rem

Шрифт приветствия 60px = 3.75rem

Указав таким образом все размеры для всех текстовых элементов в rem мы можем 2 строчками сделать адаптивный текст на всём сайте

Медиа запрос

html{
  font-size: 14px;

  @include media-breakpoint-down(lg) {
    font-size: 13px;
  }
  @include media-breakpoint-down(md) {
    font-size: 12px;
  }
  @include media-breakpoint-down(sm) {
    font-size: 11px;
  }
}