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

Question

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

113

В http://getbootstrap.com/css/ говорится:

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

Дополнительные небольшие устройства (телефоны, до 480 пикселей): Нет медиа-запроса, поскольку это значение по умолчанию в Bootstrap

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

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

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

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

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

Kris Hunt 25 окт. 2013, в 14:23

Источник

1

stackoverflow.com/questions/24066059/...
paulalexandru 22 нояб. 2016, в 09:08
0

Вот селекторы, используемые в BS4. В BS4 нет «самой низкой» настройки, потому что «очень маленькая» является настройкой по умолчанию. Т.е. вы сначала закодируете размер XS, а затем переопределяете эти носители. @media (минимальная ширина: 576 пикселей) {} @media (минимальная ширина: 768 пикселей) {} @media (минимальная ширина: 992 пикселей) {} @media (минимальная ширина: 1200 пикселей) {}
Babbandeep Singh 05 июль 2017, в 07:42

Теги:

twitter-bootstrap

twitter-bootstrap-3

media-queries

breakpoints

10 ответов

Ещё вопросы

Вот селекторы, используемые в BS4. В BS4 нет «самой низкой» настройки, потому что «очень маленькая» является настройкой по умолчанию. Т.е. вы сначала закодируете размер XS, а затем переопределяете эти носители. @media (минимальная ширина: 576 пикселей) {} @media (минимальная ширина: 768 пикселей) {} @media (минимальная ширина: 992 пикселей) {} @media (минимальная ширина: 1200 пикселей) {}

Sophy · Answer 1 · 2015-05-30T05-24-00.000Z

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

@ CyrilDuchon-Doris, вопрос был о Bootstrap 3 ... так что я так не думаю.
Ответ был награжден 30 баллами и упоминает Bootstrap 2. Многие люди будут смотреть на него, даже если не использовать Bootstrap 3. Я всегда очень благодарен людям, которые редактируют свой ответ с актуальной информацией, даже если немного первоначального объема.
так что очень мало что-нибудь ниже 479?
Bootstrap v4 еще даже не стабилен. Вы знаете об этом? Ответ, возможно, придется обновить много раз, прежде чем он достигнет стабильного выпуска.

Lance Turri · Answer 2 · 2013-10-25T18-50-00.000Z

Bootstrap не документирует мультимедийные запросы очень хорошо. Эти переменные @screen-sm, @screen-md, @screen-lg на самом деле относятся к LESS-переменным, а не к простому CSS.

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

Аналогичный вопрос здесь, который может обеспечить большую ясность: Bootstrap 3.0 Media-запросы

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

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

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

Чтобы увидеть это в действии, перейдите к этому примеру на их сайте и измените размер окна, чтобы увидеть, как он обрабатывает дизайн после 768 пикселей. // Какое это имеет отношение к 480px? Я не вижу ничего другого в 480 пикселях по сравнению, скажем, с 500 пикселями.
Что касается естественного расширения системы переменных Bootstrap 3, то это должен быть принятый ответ, поскольку это очень эффективный подход.

Antonio Espinosa · Answer 3 · 2014-02-25T09-56-00.000Z

Этот вопрос обсуждался в https://github.com/twbs/bootstrap/issues/10203 К настоящему времени план изменения сетки не существует, поскольку причины совместимости.

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

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

Дизайн для мобильных устройств (XS, менее 480 пикселей)
Добавьте классы HS (горизонтальные малые устройства) в ваш HTML: col-hs- *, visible-hs,... и дизайн для горизонтальных мобильных устройств (HS, менее 768 пикселей).
Дизайн для планшетных устройств (SM, менее 992px)
Дизайн для настольных устройств (MD, менее 1200 пикселей)
Дизайн для крупных устройств (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) */
    }
}

Извините, я не понимаю добавленной стоимости этой вилки. Как я понимаю, вы делаете @screen-hs-min:@screen-xs; , Почему бы не использовать @screen-xs прямо здесь?
Просто для лучшего выполнения. Эта переменная дает визуальную согласованность с шаблоном. Bootstrap 3 - Mobile First, поэтому все правила вне медиа-запроса относятся к размеру мобильного телефона. Затем, если вам нужно дополнительное правило для HS, вы запишете в min-width: @screen-hs-min , если вам нужно правило estra для SM, вы запишите в min-width: @screen-sm-min , и скоро. Эта вилка используется для добавления новой точки останова на 480px. Тогда размер мобильного телефона будет меньше 480px, а новый размер (HS) появится между 480px и 768px.
Обратите внимание, что шаблон имеет небольшую опечатку. screen-hs-min должен быть screen-xs-min
@eflat это не ошибка опечатки, screen-hs-min - это новое правило между screen-xs-min и screen-sm-min

Enrico · Answer 4 · 2016-07-02T11-57-00.000Z

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

}

Именно то, что мне нужно, спасибо! Так что мне не нужно делать это снова и снова :)
Также не забывайте классы .visible-xs-inline, .visible-xs-inline-block каждый раз, когда вы переопределяете .visible-xs !

Anthony · Answer 5 · 2014-01-16T21-31-00.000Z

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

gagarine · Answer 6 · 2017-06-26T13-38-00.000Z

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

От http://getbootstrap.com/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) {  }

Babbandeep Singh · Answer 7 · 2017-07-05T07-52-00.000Z

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

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

mare · Answer 8 · 2015-05-16T00-47-00.000Z

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

НТН

Xuwel Khan · Answer 9 · 2015-05-12T14-59-00.000Z

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

Danish K T · Answer 10 · 2016-11-22T08-27-00.000Z

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



}