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

172

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

Крис Хант
источник
Вот селекторы, используемые в BS4. В BS4 нет «самого низкого» параметра, потому что «очень маленький» является значением по умолчанию. Т.е. вы сначала закодируете размер XS, а затем переопределяете эти носители. @media (min-width: 576px) {} @media (min-width: 768px) {} @media (min-width: 992px) {} @media (min-width: 1200px) {}
Баббандип Сингх,

Ответы:

208

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

Софи
источник
8
@ CyrilDuchon-Doris, вопрос был о Bootstrap 3 ... так что я так не думаю.
Багата
12
Ответ был награжден 30 баллами и упоминает Bootstrap 2. Многие люди будут смотреть на него, даже если не используют Bootstrap 3. Я всегда очень благодарен людям, которые редактируют свой ответ с актуальной информацией, даже если немного первоначального объема.
Кирилл Дюшон-Дорис
так что очень мало что ниже 479?
SuperUberDuper
2
Bootstrap v4 еще даже не стабилен. Вы знаете об этом? Ответ, возможно, придется обновить много раз, прежде чем он достигнет стабильного выпуска.
Герман
Я полагаю, что здесь есть ошибка в один пиксель, которая может иметь эффект. Для экранов 1200px и 320 px вступят в силу как максимальный медиазапрос, так и минимальный медиазапрос. Все максимальные медиазапросы должны быть минус 1px (например, 1199px). Медиа-запросы min и max 320px для меня не имеют смысла, так как AFAIK практически экраны начинаются с 320px.
Бен Карп
39

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

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

Эта проблема обсуждалась на 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) */
    }
}
Антонио Эспиноса
источник
1
Извините, я не понимаю добавленной стоимости этой вилки. Как я понимаю, вы делаете @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
@eflat это не опечатка, screen-hs-minэто новое правило между screen-xs-minиscreen-sm-min
Антонио Эспиноса
7

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

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

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

Энтони
источник
2

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

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

@media(min-width:576px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}
Баббандип Сингх
источник
0

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

Ксувел Хан
источник
0

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

Даниил
источник
-6
@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) {



}
Датский КТ
источник