webTOOLS - De tudo um pouco!


 
InícioInício  CalendárioCalendário  FAQFAQ  BuscarBuscar  MembrosMembros  GruposGrupos  Registrar-seRegistrar-se  Conectar-se  

Compartilhe | 
 

 [CSS] Introdução aos modelos responsivos

Ver o tópico anterior Ver o tópico seguinte Ir em baixo 
AutorMensagem
Fraise
Administrador
avatar

Mensagens : 183
Pontos : 871
Reputação : 15
Localização : Portugal
Portugal

MensagemAssunto: [CSS] Introdução aos modelos responsivos   Ter Dez 08, 2015 5:48 pm

"Responsive Design" é a estratégia de fazer um site que "responde" ao browser e dispositivo onde está a ser apresentado... mostrando-se de forma sempre expectacular.

Media queries é a ferramenta mais potente para fazer isto. Vamos pegar no nosso layout que utiliza percentagens de largura e mostra-lo em uma coluna quando o browser é demasiado pequeno para ter o menu numa barra lateral:
Código:
@media screen and (min-width:600px) {
  nav {
    float: left;
    width: 25%;
  }
  section {
    margin-left: 25%;
  }
}
@media screen and (max-width:599px) {
  nav li {
    display: inline;
  }
}
Voltar ao Topo Ir em baixo
Ver perfil do usuário http://testefraise.forumeiros.com
Luiis_xD
Turista
avatar

Mensagens : 11
Pontos : 63
Reputação : 2
Localização : Num lugar por ae
Brasil

MensagemAssunto: Re: [CSS] Introdução aos modelos responsivos   Qua Dez 09, 2015 2:39 am

Otimo tutorial, muito obrigado vou tentar estudar mais sobre o code

Até mais  [Você precisa estar registrado e conectado para ver esta imagem.]
Voltar ao Topo Ir em baixo
Ver perfil do usuário
 
[CSS] Introdução aos modelos responsivos
Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo 
Página 1 de 1
 Tópicos similares
-
» Tutorial de CorelDraw X5: Introdução Parte 2
» Exposição de meus modelos 3D
» [Curso Gm 3D] Aula 4: MODELOS
» [Resolvido]Modelos de SketchUp
» Lógica ao programar - Introdução.

Permissão deste fórum:Você não pode responder aos tópicos neste fórum
webTOOLS - De tudo um pouco! :: Desenvolvimento Web :: CSS-
Ir para: