markdown АдаптивностьвBootstrap5

Posted 2021-05-05

## Настройка адаптивности в 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;
      }
    }