No Bootstrap 3 media queries documentation diz:
Usamos as seguintes consultas de mídia em nossos arquivos Less para criar os principais pontos de quebra no nosso sistema de grade.
Dispositivos extra pequenos (telefones, menos de 768px): Nenhuma consulta de mídia, pois este é o padrão no Bootstrap
Pequenos dispositivos (comprimidos, 768px e acima):
@media (largura mínima: @screen-sm-min) { ... }
Dispositivos médios (computadores de secretária, 992px e superior):
@media (largura mínima: @screen-md-min) { ... }
Grandes dispositivos (grandes desktops, a partir de 1200px):
@media (largura mínima: @screen-lg-min) { ... }
Devemos ser capazes de utilizar os nomes @screen-sm
, @screen-md
, e @screen-lg
nas nossas consultas de mídia também? Porque não'não funciona para mim. Tenho que utilizar medidas de pixel como @media (largura min: 768px) {...}
antes de funcionar. Estou a fazer algo de errado?
Além disso, a referência a 480px para dispositivos extra pequenos é uma gralha? Deve't isso diz até 767px? (desde removido da documentação)
O Bootstrap não documenta muito bem as consultas da mídia. Essas variáveis de @screen-sm
, @screen-md
, @screen-lg
estão na verdade se referindo a variáveis LESS e não a simples CSS.
Quando você personaliza o Bootstrap, você pode alterar os pontos de quebra da consulta de mídia e quando ele compila as variáveis @screen-xx são alteradas para qualquer largura de pixel que você definiu como screen-xx. É assim que um framework como este pode ser codificado uma vez e depois personalizado pelo usuário final para atender às suas necessidades.
Uma pergunta semelhante sobre este assunto que pode proporcionar mais clareza: https://stackoverflow.com/questions/18796505/bootstrap-3-0-media-queries
No seu CSS, você ainda terá que usar consultas de mídia tradicional para substituir ou adicionar ao que o Bootstrap está fazendo.
Em relação à sua segunda pergunta, isso não é uma gralha. Quando a tela fica abaixo de 768px a estrutura se torna completamente fluida e redimensiona em qualquer largura de dispositivo, eliminando a necessidade de pontos de quebra. O ponto de quebra a 480px existe porque há mudanças específicas que ocorrem no layout para otimização móvel.
Para ver isso em ação, vá para este exemplo no site deles (http://getbootstrap.com/examples/navbar-fixed-top/), e redimensione sua janela para ver como ele trata o design depois de 768px.
Esta questão foi discutida em https://github.com/twbs/bootstrap/issues/10203 Até agora, não há nenhum plano para mudar a Grid porque razões de compatibilidade.
Você pode obter Bootstrap a partir deste garfo, ramo hs
: https://github.com/antespi/bootstrap/tree/hs
Este ramo dá-lhe um ponto de parada extra a 480px, então você tem que fazê-lo:
Design mobile primeiro é a chave para entender o Bootstrap 3. Esta é a maior mudança do BootStrap 2.x. Como modelo de regra você pode seguir isto (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) */
}
}
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 */
Existe't um breakpoint abaixo de 768px em Bootstrap 3.
Se você quiser utilizar o @screen-sm-min
e outros mixins, então você precisa estar compilando com LESS, veja http://getbootstrap.com/css/#grid-less
Aqui's um tutorial sobre como usar o Bootstrap 3 e LESS: http://www.helloerik.com/bootstrap-3-less-workflow-tutorial