Брейкпоинты Bootstrap 5

Когда делается адаптивная верстка на bootstrap 5 удобно иметь перед глазами брейкпоинты на которых срабатывает фреймворк, меняя при этом стилли классов, взял это из bootstrap 5 для себя, что бы было под рукой, но думаю кому то может пригодится

<pre>

@media (min-width: 576px) {
  .sticky-sm-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
  }
}
@media (min-width: 768px) {
  .sticky-md-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
  }
}
@media (min-width: 992px) {
  .sticky-lg-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
  }
}
@media (min-width: 1200px) {
  .sticky-xl-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
  }
}
@media (min-width: 1400px) {
  .sticky-xxl-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
  }
}</pre>

Как использовать эти медиазапросы в своей верстке?

Берем эти брейкпоинты и добавляем их себе в конце css файла стилей (к примеру style.css), он должен подключаться после все css файлов что бы работал верно


@media (min-width: 576px) {
  
}
@media (min-width: 768px) {
  
}
@media (min-width: 992px) {
  
}
@media (min-width: 1200px) {
  
}
@media (min-width: 1400px) {
  
}

Примеры использования с объяснением

В этом примере цвет фона страницы будет изменяться в зависимости от ширины экрана. Например, если ширина экрана равна 600px, то будет применяться стиль из первого медиазапроса и цвет фона будет синим. Если ширина экрана равна 800px, то будет применяться стиль из второго медиазапроса и цвет фона будет зеленым, и так далее.

Это очень удобно для создания адаптивного дизайна сайта услуг , который выглядит хорошо на разных устройствах с разной шириной экрана.


@media (min-width: 576px) {
  /* Стили для экранов шириной 576px и больше. */
  body {
    background-color: blue;
  }
}

@media (min-width: 768px) {
  /* Стили для экранов шириной 768px и больше. */
  body {
    background-color: green;
  }
}

@media (min-width: 992px) {
  /* Стили для экранов шириной 992px и больше. */
  body {
    background-color: yellow;
  }
}

@media (min-width: 1200px) {
  /* Стили для экранов шириной 1200px и больше. */
  body {
    background-color: orange;
  }
}

@media (min-width: 1400px) {
  /* Стили для экранов шириной 1400px и больше. */
  body {
    background-color: red;
  }
}

Еще попросил ChatGPT написать медиазапросы под популярные разрешения

/* Мобильные устройства (до 576px) */
@media (max-width: 576px) {
  /* Ваши стили */
}

/* Портретный планшет (от 577px до 768px) */
@media (min-width: 577px) and (max-width: 768px) {
  /* Ваши стили */
}

/* Планшеты и небольшие экраны (от 769px до 992px) */
@media (min-width: 769px) and (max-width: 992px) {
  /* Ваши стили */
}

/* Небольшие ноутбуки (от 993px до 1200px) */
@media (min-width: 993px) and (max-width: 1200px) {
  /* Ваши стили */
}

/* Десктопы и крупные экраны (от 1201px до 1400px) */
@media (min-width: 1201px) and (max-width: 1400px) {
  /* Ваши стили */
}

/* Очень крупные экраны (от 1401px и больше) */
@media (min-width: 1401px) {
  /* Ваши стили */
}