Recomendados
Más contenido relacionado
Similar a Layout fluido e responsivo em
Similar a Layout fluido e responsivo em (20)
Layout fluido e responsivo em
- 1. Web design responsivo Dyego Costa dyego.costa@lambda3.com.br @dyegoScosta Victor Cavalcante vcavalcante@lambda3.com.br @vcavalcante
- 4. Uma empresa democrática • • • • Sem gerentes ou estrutura hierárquica Livros abertos Decisões por consenso 100% ágil http://bit.ly/lambda3democracia
- 9. Números
- 11. Por que não usar o “m ponto”? URLs Sharing SEO Performance
- 12. BUSTED!
- 13. Ingredientes Layout fluido Imagens flexíveis Media queries
- 15. LAYOUT FLUIDO
- 16. Layout fixo .pagina { width: 960px; margin: 0 auto; }
- 17. Fórmula mágica Target / Context = Result
- 18. Layout fixo
- 19. Layout fluido
- 21. IMAGENS FLEXIVEIS img { max-width: 100%; }
- 22. Cross-browser .img-bonita { width: 100%; } <!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="ie6.css" /> <![endif]-->
- 24. MEDIA QUERIES
- 25. Media types all braille embossed screen print handheld projection tv speech tty
- 26. Media types <link rel="stylesheet" type="text/css“ media=“screen” href=“site.css" /> <link rel="stylesheet" type="text/css“ media=“print” href=“print.css" /> @media screen { * { font-family: Segoe UI Light; } }
- 27. Media queries @media screen and (min-width: 1024px) { * { font-family: Segoe UI Light; } } @import url(“wide.css”) screen and (min-width: 1024px);
- 28. Planejamento
- 32. Media queries
- 34. Dicas • Preocupe-se com performance • Não redimensione imagens com CSS • Siga os padrões sugeridos pela W3C (web standards) • Design responsivo nem sempre é a resposta
- 35. Indicações