Na documentação do Bootstrap 3, a mídia consulta :

Usamos as seguintes consultas de mídia em nossos arquivos Menos para criar os principais pontos de interrupção em nosso sistema de grade.

Dispositivos pequenos demais (telefones com menos de 768px): Nenhuma consulta de mídia, pois esse é o padrão no Bootstrap

Pequenos dispositivos (tablets, 768px ou mais): @media (min-width: @screen-sm-min) { ... }

Dispositivos médios (desktops, 992px e superior): @media (min-width: @screen-md-min) { ... }

Dispositivos grandes (desktops grandes, 1200px e acima): @media (min-width: @screen-lg-min) { ... }

Que devemos ser capazes de usar as @screen-sm, @screen-mde @screen-lgnomes em nossas consultas de mídia, bem como? Porque isso não funciona para mim. Eu tenho que usar medições de pixel, como @media (min-width: 768px) {...}antes de funcionar. Estou fazendo algo errado?

Além disso, a referência a 480px para dispositivos pequenos extras é um erro de digitação? Isso não deveria dizer até 767px? ( desde que removido da documentação )

Consultas de mídia do 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) { ... }

O Bootstrap 4 fornece CSS de origem no Sass que você pode incluir via 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;
  }
}

Consultas de mídia do Bootstrap 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) {

}

Consultas de mídia do 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) {

}

Recurso de: https://scotch.io/quick-tips/default-sizes-for-twitter-bootstraps-media-queries

O Bootstrap não documenta muito bem as consultas de mídia. Essas variáveis de @screen-sm, @screen-md, @screen-lgsão, na verdade, referindo-se a variáveis menos e CSS não é simples.

Quando você personaliza o Bootstrap, pode alterar os pontos de interrupção da consulta de mídia e quando compila as variáveis ​​@ screen-xx são alteradas para qualquer largura de pixel que você definiu como screen-xx. É assim que uma estrutura como essa pode ser codificada uma vez e depois personalizada pelo usuário final para atender às suas necessidades.

Uma pergunta semelhante aqui que pode fornecer mais clareza: Consultas de mídia do Bootstrap 3.0

No seu CSS, você ainda precisará usar as consultas de mídia tradicionais para substituir ou adicionar o que o Bootstrap está fazendo.

Em relação à sua segunda pergunta, isso não é um erro de digitação. Quando a tela fica abaixo de 768px, a estrutura se torna completamente fluida e redimensionada em qualquer largura de dispositivo, eliminando a necessidade de pontos de interrupção. O ponto de interrupção em 480px existe porque existem alterações específicas no layout para otimização móvel.

Para ver isso em ação, vá para este exemplo em seu site ( http://getbootstrap.com/examples/navbar-fixed-top/ ) e redimensione sua janela para ver como ele trata o design após 768px.

Esse problema foi discutido em https://github.com/twbs/bootstrap/issues/10203 Até agora, não há nenhum plano para alterar o Grid por motivos de compatibilidade.

Você pode obter o Bootstrap neste fork, filial hs: https://github.com/antespi/bootstrap/tree/hs

Esse ramo fornece um ponto de interrupção extra em 480px, então você precisa:

1. Design para celular primeiro (XS, menor que 480px)
2. Adicione as classes HS (dispositivos pequenos horizontais) no seu HTML: col-hs- *, visible-hs, ... e projete-as para dispositivos móveis horizontais (HS, menor que 768px)
3. Design para tablets (SM, menor que 992 px)
4. Design para dispositivos de mesa (MD, menos de 1200 px)
5. Design para dispositivos grandes (LG, mais de 1200px)

Projetar o celular primeiro é a chave para entender o Bootstrap 3. Essa é a principal alteração do BootStrap 2.x. Como modelo de regra, você pode seguir isso (em MENOS):

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

Sei que isso é um pouco antigo, mas pensei em contribuir. Baseando-me na resposta de @Sophy, foi isso que fiz para adicionar um ponto de interrupção .xxs. Eu não cuidei das classes visível-em-linha, tabela.visível etc.

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

}

A referência a 480px foi removida. Em vez disso, diz:

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

Não há um ponto de interrupção abaixo de 768px no Bootstrap 3.

Se você quiser usar os @screen-sm-minmixins e outros, precisará compilar com o LESS, consulte http://getbootstrap.com/css/#grid-less

Aqui está um tutorial sobre como usar o Bootstrap 3 e MENOS: http://www.helloerik.com/bootstrap-3-less-workflow-tutorial

Você poderá usar esses pontos de interrupção se usar http://lesscss.org/ para criar seu 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) {  }

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

De fato, @screen-sm-miné uma variável que é substituída pelo valor especificado _variableao construir com Menos. Se você não usar Less, poderá substituir esta variável pelo valor:

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

O Bootstrap 3 suporta oficialmente o Sass: https://github.com/twbs/bootstrap-sass . Se você estiver usando o Sass (e deveria), a sintaxe é um pouco diferente.

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

Aqui estão os seletores usados ​​no Bootstrap 4. Não há configuração "mais baixa" no BS4 porque "extra pequeno" é o padrão. Ou seja, você primeiro codifica o tamanho do XS e depois substitui essas mídias.

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

Quando uso @media (largura máxima: 768px), meu design é interrompido em 768px. Mas está tudo bem no 767px e também no 769px. Então, acho que terá 767px como largura máxima para segmentar dispositivos pequenos.

para bootstrap 3 Eu tenho o seguinte código no meu componente 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})";

então você pode usar algo como

@media wide { selector: style }

Isso usa qualquer valor que você tenha definido para as variáveis.

O escape permite usar qualquer sequência arbitrária como propriedade ou valor variável. Qualquer coisa dentro de "qualquer coisa" ou "qualquer coisa" é usada como está, sem alterações, exceto a interpolação.

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



}