Responsive

<< Click to Display Table of Contents >>

Navigation:  Bootstrap >

Responsive

Previous pageReturn to chapter overviewNext page

Responsive Web Design?

 

Em suma, o RWD (Responsive Web Design, ou seja, o " Web Design reativo") é uma técnica que utiliza um layout flexível (que "estica" a tela, se adaptando dinamicamente melhor), além das "consultas de mídia" CSS, que aplicam diferentes folhas de estilo (CSS) com base no tamanho da tela da máquina.

Com um design reativo, o seu site se ajustará a qualquer máquina com um "explorador completo": smartphones, iPad + outros tablets (tanto em modo retrato quanto em paisagem) e, até mesmo, a TV. Não importa se a resolução do Galaxy Tab é diferente da do telefone Nexus S - o seu site aparecerá maravilhosamente lindo, desde que o Responsive Design tenha sido devidamente executado.

 

responsive

 

Fonte #1

 

<!DOCTYPE html>
<html>
  <head>
    <link href="css/bootstrap.min.css" rel="stylesheet">
   <link href="css/bootstrap-responsive.css" rel="stylesheet">
   <style>
      .fundo1 { background: #CCC; }
      .fundo2 { background: #CAC; }
      .fundo3 { background: #CCA; }
      </style>
  </head>
  <body>
     <div class="container-fluid">
       <div class="row-fluid">
          <div class="span4 fundo1">Sempre apareco</div>
          <div class="span4 fundo2 visible-phone">Sou visivel em fones</div>
          <div class="span4 fundo3 hidden-desktop">Nao apareco no desktop</div>
      <div>
    </div>
  </body>
</html>

 

Tela #1

 

Resolução baixa - celular

 

responsivo1

 

Resolução média - tablet

 

responsive2

 

Resolução alta - PC

 

responsive3

 

Fonte #2

 

<!DOCTYPE html>
<html>
  <head>
    <link href="css/bootstrap.min.css" rel="stylesheet">
   <link href="css/bootstrap-responsive.css" rel="stylesheet">
   <style>
       @media (max-width: 480px) { .borda { border: 1px red solid; } }
       @media (min-width: 481px) and (max-width: 768px) { .borda { border: 2px blue solid; font-size: 36px; } }
       @media (min-width: 768px) { .borda { border: 3px green double; } }
      </style>
  </head>
  <body>
     <div class="container-fluid">
      <div class="borda">
        Conteudo da DIV
      </div>
    </div>
    </div>
  </body>
</html>

 

Tela #2

 

Resolução baixa - celular

 

responsive4

 

Resolução média - tablet

 

responsive5

 

Resolução alta - PC

 

responsive6