Bootstrap 3 точки останова и медиа-запросы

В документации по медиазапросам 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 пикселей? (так как удалено из документации)

Ответы

Ответ 1

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

Ответ 2

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 пикселей.

Ответ 3

Эта проблема обсуждалась на 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) */
    }
}

Ответ 4

Я знаю, что это немного устарело, но я думал, что буду способствовать. Основываясь на ответе @Sophy, это то, что я сделал, чтобы добавить точку останова .xxs. Я не занимался видимыми, встроенными, 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) {

}

Ответ 5

Ссылка на 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

Ответ 6

Вы должны иметь возможность использовать эти точки останова, если вы используете 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) {  }

Ответ 7

Вот селектор, используемый в Bootstrap 4. В BS4 нет "самого низкого" параметра, поскольку по умолчанию используется "extra small". То есть вы сначала кодируете размер XS, а затем переопределяете эти носители.

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

Ответ 8

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

Ответ 9

Если вы используете LESS, вы можете использовать эти две дополнительные точки останова, которые работают (проверены!): https://github.com/brgrz/bootstrap-breakpoints

НТН

Ответ 10

для начальной загрузки 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

Ответ 11

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



}