У документації про запити засобів масової інформації Bootstrap 3 написано:

Наступні медіа-запити ми використовуємо в наших файлах Менше, щоб створити ключові точки перерви в нашій системі сітки.

Зайві невеликі пристрої (телефони, менше 768 пікселів): Немає медіа-запиту, оскільки це стандартний засіб у Bootstrap

Невеликі пристрої (планшети, 768 пікселів і вище): @media (min-width: @screen-sm-min) { ... }

Середні пристрої (настільні ПК, 992 пікселів і вище): @media (min-width: @screen-md-min) { ... }

Великі пристрої (великі настільні комп’ютери, 1200 пікселів і вище): @media (min-width: @screen-lg-min) { ... }

Чи повинні ми бути в змозі використати @screen-sm, @screen-mdі @screen-lgімена нашого медіа - запити, а? Тому що це не працює для мене. Мені доводиться використовувати вимірювання пікселів, наприклад, @media (min-width: 768px) {...}до того, як воно буде працювати. Чи я щось роблю не так?

Також, чи є посилання на 480px для надмірних невеликих пристроїв помилковою помилкою? Чи не повинно це говорити до 767px? ( оскільки видалено з документації )

Завантаження 4 медіа-запитів

// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Bootstrap 4 надає вихідний CSS в Sass, який можна включити через Sass Mixins:

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example usage:
@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

Завантаження 3 медіа-запитів

/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}



/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {

}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {

}

Запуск 2.3.2 Медіа-запити

@media only screen and (max-width : 1200px) {

}

@media only screen and (max-width : 979px) {

}

@media only screen and (max-width : 767px) {

}

@media only screen and (max-width : 480px) {

}

@media only screen and (max-width : 320px) {

}

Ресурс з: https://scotch.io/quick-tips/default-sizes-for-twitter-bootstraps-media-queries

Bootstrap не дуже добре записує медіа-запити. Ці змінні @screen-sm, @screen-md, @screen-lgфактично звертаючись до LESS змінних , а не простий CSS.

Коли ви налаштовуєте Bootstrap, ви можете змінити точки проходу медіа-запиту, а коли він компілює, змінні @ screen-xx змінюються на будь-яку ширину пікселів, яку ви визначили як screen-xx. Ось як такий кадр може бути закодований один раз, а потім налаштований кінцевим користувачем відповідно до його потреб.

Аналогічне запитання тут, що може забезпечити більшу чіткість: Bootstrap 3.0 Media media

У своєму CSS вам все одно доведеться використовувати традиційні медіа-запити, щоб перекрити або додати те, що робить Bootstrap.

Що стосується вашого другого питання, це не помилка друку. Після того, як екран опуститься нижче 768px, рамка стає повністю текучою і змінює розмір на будь-якій ширині пристрою, усуваючи необхідність у точках перерви. Точка розриву в 480px існує тому, що в макеті для мобільної оптимізації відбуваються конкретні зміни.

Щоб побачити це в дії, перейдіть до цього прикладу на їхньому веб-сайті ( http://getbootstrap.com/examples/navbar-fixed-top/ ) та змініть розмір вікна, щоб побачити, як він поводиться з дизайном після 768px.

Цю проблему обговорювали на https://github.com/twbs/bootstrap/isissue/10203 На сьогоднішній день не планується змінювати Grid через причини сумісності.

Ви можете отримати Bootstrap з цієї вилки, відділення hs: https://github.com/antespi/bootstrap/tree/hs

Ця гілка дасть вам додаткову точку перерви в 480px, тому вам доведеться:

1. Спочатку дизайн для мобільних пристроїв (XS, менше 480 пікселів)
2. Додайте класи HS (горизонтальні малі пристрої) у свій HTML: col-hs- *, видимі hs, ... та дизайн для горизонтальних мобільних пристроїв (HS, менше 768px)
3. Дизайн для планшетних пристроїв (SM, менше 992 пікселів)
4. Дизайн для настільних пристроїв (MD, менше 1200 пікселів)
5. Дизайн для великих пристроїв (LG, більше 1200 пікселів)

Спочатку дизайн мобільних - це ключ до розуміння Bootstrap 3. Це основна зміна від BootStrap 2.x. Як правило, ви можете дотримуватися цього шаблону (менше):

.template {
    /* rules for mobile vertical (< 480) */

    @media (min-width: @screen-hs-min) {
       /* rules for mobile horizontal (480 > 768)  */
    }
    @media (min-width: @screen-sm-min) {
       /* rules for tablet (768 > 992) */
    }
    @media (min-width: @screen-md-min) {
       /* rules for desktop (992 > 1200) */
    }
    @media (min-width: @screen-lg-min) {
       /* rules for large (> 1200) */
    }
}

Я знаю, що це трохи старе, але я думав, що я буду сприяти. Опираючись на відповідь від @Sophy, це те, що я зробив, щоб додати точку розриву .xxs. Я не подбав про видимі-inline, table.visible тощо.

/*==========  Mobile First Method  ==========*/

  .col-xxs-12, .col-xxs-11, .col-xxs-10, .col-xxs-9, .col-xxs-8, .col-xxs-7, .col-xxs-6, .col-xxs-5, .col-xxs-4, .col-xxs-3, .col-xxs-2, .col-xxs-1 {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    float: left;
  }

.visible-xxs {
  display:none !important;
}

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) and (max-width:479px) {

  .visible-xxs {
    display: block !important;
  }
  .visible-xs {
    display:none !important;
  }

  .hidden-xs {
    display:block !important;
  }

  .hidden-xxs {
    display:none !important;
  }

  .col-xxs-12 {
    width: 100%;
  }
  .col-xxs-11 {
    width: 91.66666667%;
  }
  .col-xxs-10 {
    width: 83.33333333%;
  }
  .col-xxs-9 {
    width: 75%;
  }
  .col-xxs-8 {
    width: 66.66666667%;
  }
  .col-xxs-7 {
    width: 58.33333333%;
  }
  .col-xxs-6 {
    width: 50%;
  }
  .col-xxs-5 {
    width: 41.66666667%;
  }
  .col-xxs-4 {
    width: 33.33333333%;
  }
  .col-xxs-3 {
    width: 25%;
  }
  .col-xxs-2 {
    width: 16.66666667%;
  }
  .col-xxs-1 {
    width: 8.33333333%;
  }
  .col-xxs-pull-12 {
    right: 100%;
  }
  .col-xxs-pull-11 {
    right: 91.66666667%;
  }
  .col-xxs-pull-10 {
    right: 83.33333333%;
  }
  .col-xxs-pull-9 {
    right: 75%;
  }
  .col-xxs-pull-8 {
    right: 66.66666667%;
  }
  .col-xxs-pull-7 {
    right: 58.33333333%;
  }
  .col-xxs-pull-6 {
    right: 50%;
  }
  .col-xxs-pull-5 {
    right: 41.66666667%;
  }
  .col-xxs-pull-4 {
    right: 33.33333333%;
  }
  .col-xxs-pull-3 {
    right: 25%;
  }
  .col-xxs-pull-2 {
    right: 16.66666667%;
  }
  .col-xxs-pull-1 {
    right: 8.33333333%;
  }
  .col-xxs-pull-0 {
    right: auto;
  }
  .col-xxs-push-12 {
    left: 100%;
  }
  .col-xxs-push-11 {
    left: 91.66666667%;
  }
  .col-xxs-push-10 {
    left: 83.33333333%;
  }
  .col-xxs-push-9 {
    left: 75%;
  }
  .col-xxs-push-8 {
    left: 66.66666667%;
  }
  .col-xxs-push-7 {
    left: 58.33333333%;
  }
  .col-xxs-push-6 {
    left: 50%;
  }
  .col-xxs-push-5 {
    left: 41.66666667%;
  }
  .col-xxs-push-4 {
    left: 33.33333333%;
  }
  .col-xxs-push-3 {
    left: 25%;
  }
  .col-xxs-push-2 {
    left: 16.66666667%;
  }
  .col-xxs-push-1 {
    left: 8.33333333%;
  }
  .col-xxs-push-0 {
    left: auto;
  }
  .col-xxs-offset-12 {
    margin-left: 100%;
  }
  .col-xxs-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-xxs-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-xxs-offset-9 {
    margin-left: 75%;
  }
  .col-xxs-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-xxs-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-xxs-offset-6 {
    margin-left: 50%;
  }
  .col-xxs-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-xxs-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-xxs-offset-3 {
    margin-left: 25%;
  }
  .col-xxs-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-xxs-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-xxs-offset-0 {
    margin-left: 0%;
  }

}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {

  .visible-xs {
    display:block !important;
  }

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

  .visible-xs {
    display:none !important;
  }

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}

Посилання на 480px видалено. Натомість сказано:

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

У Bootstrap 3 немає точки перерви нижче 768px.

Якщо ви хочете використовувати @screen-sm-minта інші комбінації, то вам потрібно компілювати LESS, див. Http://getbootstrap.com/css/#grid-less

Ось підручник щодо використання Bootstrap 3 та LESS: http://www.helloerik.com/bootstrap-3-less-workflow-tutorial

Ви можете мати змогу використовувати ці точки перерви, якщо для створення CSS ви використовуєте http://lesscss.org/ .

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) {  }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) {  }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) {  }

З https://getbootstrap.com/docs/3.4/css/#grid-media-queries

Насправді @screen-sm-minце змінна, ніж замінена значенням, вказаним у _variableбудівництві з Менше. Якщо ви не використовуєте Менше, ви можете замінити цю змінну на значення:

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {  }

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {  }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  }

Bootstrap 3 офіційно підтримує Sass: https://github.com/twbs/bootstrap-sass . Якщо ви використовуєте Sass (і вам слід), синтаксис трохи інший.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: $screen-sm-min) { }

/* Medium devices (desktops, 992px and up) */
@media (min-width: $screen-md-min) {  }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: $screen-lg-min) {  }

Ось селектори, які використовуються у Bootstrap 4. У BS4 немає "найнижчого" налаштування, оскільки типовим є "extra small". Тобто ви спочатку зашифрували б розмір XS, а потім змінили б цей носій.

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

коли я використовую @media (максимальна ширина: 768px), моя конструкція перервана на 768px. Але це нормально на 767px, а також на 769px. Отже, я думаю, це буде 767 пікселів як максимальна ширина для націлювання на невеликі пристрої.

для завантажувального пристрою 3 У моєму компоненті навбар є наступний код

/**
 * Navbar styling.
 */
@mobile:          ~"screen and (max-width: @{screen-xs-max})";
@tablet:          ~"screen and (min-width: @{screen-sm-min})";
@normal:          ~"screen and (min-width: @{screen-md-min})";
@wide:            ~"screen and (min-width: @{screen-lg-min})";
@grid-breakpoint: ~"screen and (min-width: @{grid-float-breakpoint})";

то ви можете використовувати щось подібне

@media wide { selector: style }

Тут використовується будь-яке значення, для якого встановлені змінні.

Escaping дозволяє використовувати будь-який довільний рядок як властивість або змінне значення. Все, що знаходиться всередині ~ "будь-що" або ~ "що-небудь", використовується так, як не має змін, крім інтерполяції.

http://lesscss.org

@media screen and (max-width: 767px) {

}

@media screen and (min-width: 768px) and (max-width: 991px){


}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape){


}

@media screen and (min-width: 992px) {



}