Se estivéssemos em algum ponto próximo da Idade Média, alguns diriam que
essa é uma fórmula mágica! Mas, não, não é magia.
Fórmula mágica do web design responsivo
Alvo / Contexto = Resultado
Alvo. Elemento-alvo com a medida atual;
Contexto. Onde o elemento-alvo está (baseado no elemento-pai);
Resultado. O valor relativo que se está procurando.
26
Casa do Código
Capítulo 3. layout fluído
Com essa fórmula rápida, é possível realizar cálculos simples para saber o resul-
tado de conversões de medidas absolutas do CSS para medidas relativas. E isso vale tanto para o cálculo de tamanho de fontes - existe uma certa convenção de que o tamanho padrão de fontes em browsers desktop é de 16px -, quanto para medidas de
layout!
Então, voltando ao nosso exemplo, agora fica simples descobrir qual a equiva-
lência em ems de 24px. Basta aplicarmos a fórmula.
24 / 16 = 1,5
Ou seja, ao pegar nosso alvo (o título) de 24px e dividir pelo contexto (no caso,
seu elemento-pai, que é body, possui tamanho fonte de 100%, ou, no caso, 16px),
temos como resultado 1,5. Como estamos tratando de tamanho relativo de fontes
em CSS, o resultado final é 1.5em.
Imaginemos que haja um link dentro do título, que, no planejamento, teria 11px
de tamanho. É preciso converter isso para medida relativa. Aplicando a fórmula
obtemos 11 / 16 = 0,6875, certo? Errado!
Já que o link se encontra dentro do título, o contexto mudou! Agora, o elemento-alvo não está mais no contexto geral da página (body). Então, para conseguir o
resultado correto, a variável de contexto da fórmula muda.
11 / 24 = 0,45833333333333
O elemento que, em medidas absolutas, deveria ter 11px, está dentro do
contexto do título (que, em medidas absolutas, teria 24px), que resulta em
0.45833333333333em.
Ethan Marcotte sugere que, quando o resultado da divisão contiver tantos núme-
ros depois da vírgula, para não ficarmos tentados a arredondar e usar um número
mais enxuto, deixando o resultado com tantos números quanto sua calculadora
conseguiu exibir. No entanto, o Autor corta pra ficar com 4 números depois da vír-
gula e nunca teve problemas. Faça seus próprios testes e opte pelo que lhe trouxer melhores resultados.
3.3
Exemplo de um layout fixo
Como você já deve ter percebido a esta altura do campeonato, é possível aplicar nossa fórmula mágica tanto para descobrir a equivalência relativa de tamanhos de fontes, quanto para desenvolver um layout fluído. Para um melhor entendimento, vamos
nos basear em um modelo de página fictícia, que ajudará bastante para aplicarmos
os conceitos que estamos vendo.
27
3.3. Exemplo de um layout fixo
Casa do Código
HTML de um layout fixo
Vejamos um exemplo do que encontramos no dia-a-dia da navegação na web:
um site com layout fixo. A intenção é mostrar, através de um layout simples, a marcação de HTML e CSS que se encontra comumente, por aí.
HTML e CSS
O objetivo deste livro não é discutir teorias, técnicas ou condutas de es-
crita de HTML e CSS. Questões como espaçamentos, uso ou não de clas-
ses ou IDs, espaçamentos, identação, etc, fogem do escopo do livro.
Se você quer conhecer mais, não deixe de conhecer o livro do Lucas
Mazza, de HTML5 e CSS3, também pela Casa do Código.
Então, imaginemos uma página de um site com layout fixo que se pareça com
isso:
Seu HTML é simples - como todo HTML deve(ria) ser - e não apresenta nada
diferente do convencional. Provavelmente você já deve conhecer HTML, mas, para
deixar bem claro sobre a função de nosso código, vamos a uma sucinta explicação.
28
Casa do Código
Capítulo 3. layout fluído
Primeiramente, temos toda a estrutura da página englobada por um contêiner.
Essa é uma técnica muito comum:
<div class="container">
[...]
</div>
Existem 3 divisões principais, dentro do div container: um cabeçalho, o espaço
para a inserção dos conteúdos principais e um rodapé. Novamente, sem nenhuma
novidade para as técnicas mais básicas de estruturação em HTML:
<div class="container">
<header class="header">
[...]
</header>
<div class="content">
[...]
</div>
<footer class="main-footer">
[...]
</footer>
</div>
Neste modelo de estrutura HTML, header e footer costumam sempre ter o
mesmo conteúdo, independentemente da página do site que está sendo visitada
no momento. Portanto, fica óbvio que os conteúdos principais do site ficam em
content.
Dentro de content, também temos 2 porções de conteúdo": a parte dos conteú-
dos principais, propriamente ditos, e uma sidebar - também conhecida como barra
lateral.
<div class="container">
<div class="content">
<div class="content-main">
[...]
</div>
<aside class="content-sidebar">
[...]
29
3.3. Exemplo de um layout fixo
Casa do Código
</aside>
</div>
</div>
Portanto,
a estrutura deste site simples,
demonstrada através desta
página-exemplo, basicamente teria a mudança de conteúdos acontecendo em
content-main. Nesta página, há uma chamada para o conteúdo mais recente ou
mais importante em dado momento (a que chamamos, no caso, de hero), seguido