В документации по медиазапросам Bootstrap 3 написано:

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

Очень маленькие устройства (телефоны, менее 768 пикселей): нет медиазапроса, так как это по умолчанию в Bootstrap

Небольшие устройства (планшеты, 768 пикселей и выше): @media (min-width: @screen-sm-min) { ... }

Средние устройства (настольные ПК, 992px и выше): @media (min-width: @screen-md-min) { ... }

Большие устройства (большие рабочие столы, 1200px и выше): @media (min-width: @screen-lg-min) { ... }

Должны ли мы быть в состоянии использовать @screen-sm, @screen-mdи @screen-lgимена нашего медиа - запросы, а? Потому что это не работает для меня. Я должен использовать измерения пикселей, например, @media (min-width: 768px) {...}прежде чем он будет работать. Я делаю что-то неправильно?

Кроме того, является ли ссылка на 480px для очень маленьких устройств опечаткой? Разве это не должно говорить до 767 пикселей? ( так как удалено из документации )

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

Bootstrap 3 Media Queries

/*==========  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) {

}

Bootstrap 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 Медиа-запросы

В вашем CSS вам все равно придется использовать традиционные медиа-запросы для переопределения или добавления к тому, что делает Bootstrap.

Что касается вашего второго вопроса, это не опечатка. Как только экран становится ниже 768 пикселей, каркас становится полностью плавным и изменяет размеры при любой ширине устройства, устраняя необходимость в точках останова. Точка останова в 480px существует, потому что есть определенные изменения, которые происходят в макете для мобильной оптимизации.

Чтобы увидеть это в действии, перейдите к этому примеру на их сайте ( http://getbootstrap.com/examples/navbar-fixed-top/ ) и измените размер окна, чтобы увидеть, как оно обрабатывает дизайн после 768 пикселей.

Эта проблема обсуждалась на https://github.com/twbs/bootstrap/issues/10203. В настоящее время не планируется менять Grid из-за соображений совместимости.

Вы можете получить Bootstrap из этой ветки, ветка hs: https://github.com/antespi/bootstrap/tree/hs

Эта ветка дает вам дополнительную точку останова на 480px, так что вам нужно:

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

Дизайн мобильных устройств - это ключ к пониманию Bootstrap 3. Это основное отличие от BootStrap 2.x. Как шаблон правила вы можете следовать этому (в LESS):

.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. Я не позаботился о классах visible-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 нет точки останова ниже 768 пикселей.

Если вы хотите использовать @screen-sm-minи другие миксины, то вам нужно компилировать с LESS, см. Http://getbootstrap.com/css/#grid-less

Вот учебник о том, как использовать Bootstrap 3 и LESS: http://www.helloerik.com/bootstrap-3-less-workflow-tutorial

Вы должны иметь возможность использовать эти точки останова, если вы используете http://lesscss.org/ для создания своего CSS.

/* 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при построении с помощью Less. Если вы не используете Less, вы можете заменить эту переменную значением:

/* 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 нет «самого низкого» значения, потому что «очень маленький» является значением по умолчанию. Т.е. вы сначала закодируете размер XS, а затем переопределяете эти носители.

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

когда я использую @media (max-width: 768px), мой дизайн ломается на 768px. Но это нормально на 767px, а также на 769px. Итак, я думаю, что максимальная ширина будет 767 пикселей для таргетинга на небольшие устройства.

для начальной загрузки 3 у меня есть следующий код в моем компоненте navbar

/**
 * 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 }

При этом используется любое значение, для которого установлены переменные.

Экранирование позволяет использовать любую произвольную строку в качестве значения свойства или переменной. Все внутри ~ "что-нибудь" или ~ "что-нибудь" используется как есть, без изменений, кроме интерполяции.

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) {



}