Dicas de códigos para Site Responsivo

Exemplo de Layout Responsivo

Um Site Responsivo tem um layout flexível que se adapta a qualquer dispositivo, seja smartphone, tablet ou desktop . Recomendamos sempre iniciar o projeto configurando primeiramente o layout para smartphone e depois para os outros dispositivos.

A tag meta viewport

  1. <meta name="viewport" content="width=device-width, initial-scale=1.0">  

Media Queries

  1. /* Layout para celulares: menor ou igual a 480 px. */  
  2.   
  3. .gridContainer {  
  4.     margin-left: auto;  
  5.     margin-right: auto;  
  6.     width: 87.36%;  
  7.     padding-left: 1.82%;  
  8.     padding-right: 1.82%;  
  9. }  
  10. #LayoutDiv1 {  
  11.     clear: both;  
  12.     float: left;  
  13.     margin-left: 0;  
  14.     width: 100%;  
  15.     display: block;  
  16. }  
  17.   
  18. /* Layout para tablets: 481 px a 768 px. Herda estilos de: Layout para celulares. */  
  19.   
  20. @media only screen and (min-width: 481px) {  
  21. .gridContainer {  
  22.     width: 90.675%;  
  23.     padding-left: 1.1625%;  
  24.     padding-right: 1.1625%;  
  25. }  
  26. #LayoutDiv1 {  
  27.     clear: both;  
  28.     float: left;  
  29.     margin-left: 0;  
  30.     width: 100%;  
  31.     display: block;  
  32. }  
  33. }  
  34.   
  35. /* Layout para desktops: 769 px até o máximo de 1232 px. Herda estilos de: Layout para celulares e Layout para tablets. */  
  36.   
  37. @media only screen and (min-width: 769px) {  
  38. .gridContainer {  
  39.     width: 88.2%;  
  40.     max-width: 1232px;  
  41.     padding-left: 0.9%;  
  42.     padding-right: 0.9%;  
  43.     margin: auto;  
  44. }  
  45. #LayoutDiv1 {  
  46.     clear: both;  
  47.     float: left;  
  48.     margin-left: 0;  
  49.     width: 100%;  
  50.     display: block;  
  51. }  
  52. }  

max-width e min-width

  1. .container {  
  2.     width: 800px;  
  3.     max-width: 90%;  
  4. }  

Imagem e mídia flexível

  1. img {   
  2.   max-width: 100%;   
  3.   height: auto;  
  4. }  

Redimensionamento da Tipografia

  1. body {  
  2.    font-size: 100%;  
  3.    font-family:Georgia;  
  4. }  
  5.   
  6. @media only screen and (max-width: 400px) {  
  7.    body { font-size:80%;}  
  8.  }  

Overflow:hidden

  1. .image-wrap {  
  2.     max-height: 450px;  
  3.     overflow: hidden;  
  4.     max-width: 800px;        
  5. }  
  6.   
  7. .image-wrap img {  
  8.     width: 100%;  
  9. }  
  10.   
  11. @media only screen and (min-width: 1160px) {  
  12.     .image-wrap { max-width: 1000px }  
  13. }  

Quebras de linha automáticas em colunas estreitas usando CSS3

  1. -moz-hyphens:auto;  
  2. -ms-hyphens:auto;  
  3. -webkit-hyphens:auto;  
  4. hyphens:auto;  
  5. word-wrap:break-word;  

Imagens de Fundo que ocupem toda tela

  1. html {  
  2.     background: url(bg.jpg) no-repeat center center fixed;  
  3.     -webkit-background-size: cover;  
  4.     -moz-background-size: cover;  
  5.     -o-background-size: cover;  
  6.     background-size: cover;  
  7. }  

Imagens de Fundo Flexíveis

  1. .background {  
  2.     display: block;  
  3.     height: 0;  
  4.     padding-bottom: 80%;  
  5.     background: url(images/image.jpg) no-repeat;  
  6.     background-size: 100%;  
  7.     text-indent: -9999px;  
  8. }  

Multi-colunas

  1. @media all and (min-width: 900px) {  
  2.    #example p  {  
  3.   -webkit-column-count: 3;  
  4.   -webkit-column-gap: 1%; /* Saf3, Chrome*/  
  5.   -moz-column-count: 3;     
  6.   -moz-column-gap: 1%; /* FF3.5+ */  
  7.   column-count: 3;          
  8.   column-gap: 1%; /* Opera 11+*/  
  9.   }  
  10. }  
  11.   
  12. @media all and (max-width: 900px) and (min-width: 600px) {  
  13. #example p  {  
  14.   -webkit-column-count: 2; /* Saf3, Chrome*/  
  15.   -webkit-column-gap: 4%; /* Saf3, Chrome*/  
  16.   -moz-column-count: 2; /* FF3.5+ */  
  17.   -moz-column-gap: 4%; /* FF3.5+ */  
  18.   column-count: 2; /* Opera 11+*/  
  19.   column-gap: 4%; /* Opera 11+*/  
  20.   }  
  21. }  

Layout de caixas flexíveis

Layout de caixas flexíveis
Layout de caixas flexíveis
  1. /* Este é somente um exemplo de como se pode ser usado esta propriedade no CSS */  
  2. aside {  
  3. background-color: orange;  
  4. order: 4;  
  5. flex: 1 ;  
  6. }  
  7. .mainContent {  
  8. background-color: white;  
  9. order: 3;  
  10. flex: 2;  
  11. }  
  12. .extraDiv {  
  13. background-color: pink;  
  14. order: 2;  
  15. flex: 1;  
  16. }  






Beto Marques

Beto MarquesWebdesigner e Consultor desde 1997. Desenvolveu vários Sites, Cursos, Tutoriais e Ebooks sobre Webdesign.

Como consultor já treinou várias empresas e dentre seus trabalhos , se destaca Treinamento de FrontPage e Flash para o Departamento de Computação Gráfica - TV Globo - Projac.


Voltar ao Topo