0

Estou criando uma página com layout responsivo, em relação a resoluçao de smartphones funciona normalmente, quando aumento para tablet não dá nenhum resultado. Porquê?

@media(max-width:480px){
    div#formulario{
        width: 250px; 
        height:300px;
    }   
}

@media (min-width:481px)and(max-width:960px){
    div#formulario{
        width: 350px; 
        height:400px;
    }
}

@media(min-width:961px){
    div#formulario{
        width:450px; 
        height:500px;   
    }
}
4
  • Oi Lamborghini. Dá uma melhorada na formatação do código, por favor. É só editar a pergunta, selecionar o código e clicar no botão {} do editor. Mais detalhes em pt.stackoverflow.com/editing-help. Bom, o @brasofilo deixou meu comentário obsoleto antes mesmo de eu publicá-lo; mas fica a dica.
    – bfavaretto
    Commented 18/10/2014 às 1:43
  • Na primeira regra não deveria ser min-width?
    – bfavaretto
    Commented 18/10/2014 às 1:52
  • Desculpe por demorar pra responder @bfavaretto min-width funcionou tudo esta ok
    – ndroid
    Commented 18/10/2014 às 2:45
  • Será? Percebi agora que a minha sugestão não faz muito sentido.
    – bfavaretto
    Commented 18/10/2014 às 3:02

1 Resposta 1

2

Fiz um exemplo com seu código e também alguns ajustes no CSS (especificação dos tamanhos mínimos e máximos).

#formulario {
    background:#000;
}

@media (max-width: 480px ) {
    #formulario {
        width: 200px;
        height: 200px;
    }
}

@media (min-width: 480px) and (max-width: 960px) {
    #formulario {
        width: 400px;
        height: 400px;
    }
}

@media (min-width: 960px) {
    #formulario {
        width: 600px;
        height: 600px;
    }    
}

Exemplo JSFIDDLE

Apenas para complemento vamos esclarecer a regra:

Estamos em uma tela de 800x600px (Largura x Altura) ao acessar o site a regra aplicada será:

@media (min-width: 480px) and (max-width: 960px)

Pois numa resolução mínima de 480px até um máximo de 960px aplica-se as regras.

Caso a resolução seja superior a 960px a regra que será aplicada será:

@media (min-width: 960px)
1
  • muito bom @Diego Vieira li um tópico a respeito disso e resolvi tudo mesmo assim valeu
    – ndroid
    Commented 19/10/2014 às 5:01

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 .