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

                                
                            

@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;
  }
}

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

                                
                            

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

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

                                
                            

@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;
  }
}
Мы используем Cookie

для корректной работы сайта

X