|
<< Click to Display Table of Contents >> Responsive |
  
|
|
<< Click to Display Table of Contents >> Responsive |
|
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.
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
Resolução média - tablet
Resolução alta - PC
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
Resolução média - tablet
Resolução alta - PC
