44
Casa do Código
Capítulo 3. layout fluído
Isso impossibilitaria a pessoa que está fazendo o acesso de dar zoom nas páginas
do site. Se esse for realmente o objetivo proposto no site, tudo bem; mas, repetindo: atenção ao usar parâmetros combinados.
3.5
Convertendo um layout fixo em layout fluído
Construir layouts fluídos (ou grids flexíveis) é nosso maior objetivo ao ler este livro.
Depois que os conceitos aqui mostrados já estiverem internalizados e bastante prá-
tica tiver sido feita, você conseguirá, antes mesmo de colocar o dedo para digitar a primeira regra CSS, já imaginar com foco à construção de layouts fluídos.
Enquanto isso não acontece, vamos fazer um exercícios interessante, que vai cla-
rear bastante alguns dos principais conceitos de designs responsivos: vamos converter o layout fixo que vimos anteriormente para um layout fluído. Como? Simples-
mente aplicando nossa fórmula mágica do web design responsivo! Mas primeiro...
Como vamos mexer mais com as medidas que especificamos anteriormente, não
há necessidade de revisarmos todo o CSS mostrado. Ao invés disso, vamos nos ater
aos trechos que mais interessam ao nosso exercício de conversão, começando com
nosso .container.
A largura de .container é de 960px. Obviamente, isso não ajuda em nada a
montagem de um grid flexível dado que, como já foi visto, a principal e primeira
medida a ser tomada para se construir um layout flexível é usar somente medidasrelativas no CSS. Revisando nossa fórmula: Alvo / Contexto = Resultado.
No caso, como se trata do elemento contêiner, não temos um contexto que sirva
como base. Então, da mesma forma que, arbitrariamente, especificamos essa largura
para o elemento, vamos tentar uma largura com medida relativa que, quando vista
no browser, se pareça o máximo possível com o valor que temos atualmente. Depois
de alguns testes, a encontramos:
.container {
margin: 0 auto;
width: 67.5%; /* +/- 960 */
}
Como pôde ser visto neste sucinto trecho de código, uma excelente prática,
quando estamos trabalhando com layouts fluídos, é fazer um comentário na frente
do valor convertido (ou construído) para não perder a noção do que se está fazendo.
Fica a dica.
45
3.5. Convertendo um layout fixo em layout fluído
Casa do Código
Em relação a este valor de 67.5% para o contêiner, foi totalmente opcional e ser-
vindo somente para ilustrar nosso site-exemplo. Didaticamente, o Autor acredita ser interessante preservar a característica de sites centralizados para a adaptação e mais fácil assimilação dos conceitos de web design responsivo. Entretanto, outras abordagens poderiam ter sido usadas:
Deixar o width em 960px fixos e transformar todo o resto em % e em. Não
tão eficiente, já que vai ficar com esta largura independentemente da tela ser
maior ou menor que 960px. Não seria uma solução responsiva.
Responsivar pra telas mobile menores que 960px, mas manter os 960px para
telas maiores. Usaria-se max-width:960px e continuaria igual para resoluções
desktop-like, mas, ao ser exibido em resoluções menores, vai se ajustar por
não ter largura fixa.
A solução anterior é responsiva para telas pequenas, mas limita em 960
pra telas maiores. Também é possível responsivar para todas, colocando
width:100% no contêiner. Para projetos que precisam/queiram contar com
largura total em quaisquer resoluções, esta abordagem seria a ideal.
Dando prosseguimento, agora é preciso passar o tamanho da fonte de h1 para
medidas relativas. A coisa está começando a ficar mais fácil já que, neste caso, temos todas variáveis da nossa fórmula! Lembre-se que existe um certo padrão entre os
browsers de colocar o tamanho inicial das fontes em 16px? Isso é tudo que precisamos no momento.
Quer dizer, 32 (Alvo) dividido por 16 (Contexto) é igual a 2 (Resultado) - lembrando daquela outra observação importante: quando se trata de medidas relativas
para fontes, usamos a medida em; quando
é para medidas de layout, porcento.
/* Antes */
h1 {
font-size: 32px;
}
/* Depois */
h1 {
font-size: 2em; /* 32 / 16 */
}
46
Casa do Código
Capítulo 3. layout fluído
Depois disso, chegamos ao próximo elemento de nosso layout: .content.
Usando nossa fórmula, novamente, ou seja: 15 dividido por 960 (a medida de nossa já finada largura fixa) é igual a 0.015625. Mas, espere! Ao se aplicar este valor ínfimo ao layout, as coisas não funcionam como o esperado! Bem, como estamos lidando
com porcentagens, precisamos multiplicar o valor por 100. Matemágica pura!
/* Antes */
.content {
margin: 15px 0;
}
/* Depois */
.content {
margin: 1.5625% 0; /* 15 / 960 */
}
Finalmente, nossas margens fluídas estão devidamente configuradas e prontas
para o que der e vier! Com isso em mente, o elemento .content-main não vai re-
presentar nenhum perigo. Mas se você estiver, realmente, prestando atenção aos
códigos de exemplo, poderá estar com uma pergunta intrigante em sua mente: onde
está o Contexto?!
Como calcular o Contexto em elementos sem Con-
texto imediato