Bootstrap 3 pontos de interrupção e consultas de mídia


170

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 )



Aqui estão os seletores usados ​​no BS4. Não há configuração "mais baixa" no BS4 porque "pequeno demais" é o padrão. Ou seja, você primeiro codifica o tamanho do XS e depois substitui essas mídias. @media (largura mínima: 576px) {} @media (largura mínima: 768px) {} @media (largura mínima: 992px) {} @media (largura mínima: 1200px) {}
Babbandeep Singh

Respostas:


205

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


8
@ CyrilDuchon-Doris, a pergunta era sobre o Bootstrap 3 ... então eu acho que não.
Bagata

12
A resposta recebeu 30 pontos e menciona o Bootstrap 2. Muitas pessoas vão dar uma olhada, mesmo se não estiver usando o Bootstrap 3. Sempre sou muito grato às pessoas que editam sua própria resposta com informações atualizadas, mesmo que um pouco afastadas. do escopo inicial.
Cyril Duchon-Doris

então é algo muito pequeno abaixo de 479?
SuperUberDuper

2
O Bootstrap v4 ainda não é estável. Você está ciente disso? A resposta pode precisar ser atualizada várias vezes antes de atingir uma versão estável.
Gherman

Eu acredito que existe aqui o erro de um pixel, que pode realmente ter efeito. Para telas de 1200px e 320 px, a consulta de mídia máxima e a consulta de mídia mínima terão efeito. Todas as consultas máximas de mídia devem ter menos 1 px (1199 px, por exemplo). As consultas mínimas e máximas de mídia de 320 px não fazem muito sentido para mim, uma vez que as telas do AFAIK praticamente começam em 320 px.
Ben Carp

39

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.


6
Para ver isso em ação, vá para este exemplo no site deles e redimensione sua janela para ver como ele trata o design após 768px. // O que isso tem a ver com 480px? Não vejo nada de diferente acontecendo em 480 pixels em comparação com, digamos, 500 px.
Kris Hunt #

No que diz respeito à expansão natural no sistema variável do Bootstrap 3, essa deve ser a resposta aceita, pois é uma abordagem muito eficiente.
klewis

28

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

1
Desculpe, eu não entendo o valor agregado deste garfo. Como eu entendo você @screen-hs-min:@screen-xs;. Por que não usar @screen-xsdiretamente aqui?
Bass Jobsen

Apenas para uma melhor compreensão. Essa variável fornece uma consistência visual ao modelo. O Bootstrap 3 é o Mobile First, portanto, todas as regras fora da consulta de mídia são para o tamanho do celular. Então, se você precisar de uma regra extra para HS, anote min-width: @screen-hs-min, se precisar de uma regra estra para SM, anote min-width: @screen-sm-mine assim por diante. Este garfo é usado para adicionar um novo ponto de interrupção em 480px. Então tamanho móvel está sob 480px e um novo tamanho (HS) aparece entre 480px e 768px
Antonio Espinosa

Observe que o modelo tem um pequeno erro de digitação. screen-hs-min deve ser screen-xs-min
eflat

@eflat isso não é um erro de digitação, screen-hs-miné uma nova regra entre screen-xs-minescreen-sm-min
Antonio Espinosa

7

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

}

1
Exatamente o que eu precisava, obrigado! Então eu não precisa fazer tudo de novo :)
antoni

Também não se esqueça das aulas .visible-xs-inline, .visible-xs-inline-blocksempre que você substituir .visible-xs!
antoni

6

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


2

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

1

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

0

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.


0

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


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



}
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.