5

Gostaria de saber como declarar um valor a uma propriedade CSS de acordo com a resolução do navegador no Bootstrap.

Exemplo: Quero que uma borda seja exibida somente em smartphones ou resoluções muito pequenas (col-xs). O bootstrap prevê uma forma fácil de se fazer isso?

2

1 Resposta 1

3

Para isso você vai precisar utilizar a media query do css 3. Vamos pelo seu exemplo:

Todos os elementos que contenham a classe .borda devem de ter uma borda de 1px nos dispositivos com tela menor que 768px de largura (celulares), para tanto, no CSS devemos definir as seguintes regras:

/* Todos os elementos que contenham a classe 'borda' terão uma borda de 1px preta */
.borda{ border: 1px solid #000; }

/* Agora apenas os dispositivos que tenham resolução menor que 768px terão borda */
@media (min-width: 768px){
  .borda{ border: none; }
}

Obs: O exemplo acima foi dado com base neste link

3
  • @Caputo, removi sua edição pois o comentário estava correto, a media query serve exatamente para que dispositivos com resolução de no mínimo 768px não tenham borda, assim, dispositivos com menos de 768px terão borda. Commented 17/12/2014 às 11:04
  • Ops, então foi falha de compreensão minha aí. Desculpe e obrigado pelo aviso! Interpretei errado o min-width
    – Caputo
    Commented 17/12/2014 às 11:06
  • Perfeito, Mateus. Obrigado! Commented 17/12/2014 às 12:32

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .