cheio de Lorem ipsum... se adaptava a qualquer tamanho de janela do navegador?
E por quê? Porque não havia nenhuma especificação de largura! Simples assim.
3.1. Tipos de medida em CSS
Casa do Código
Portanto, ao especificar tamanhos, espaçamentos, margens, paddings, enfim, ao
estipular qualquer medida referente ao layout das páginas do site, é preciso usar valores relativos, como porcentagens e ems, como veremos.
Antes de prosseguirmos, vamos ver quais são os tipos de medidas em CSS.
3.1
Tipos de medida em CSS
Embora existam outros tipos de medidas em CSS, vamos basear esta explicação nas
4 principais: pixels, pontos, porcentagens e ems.
Pixel (px). É a unidade de medida fixa mais usada nas CSS. Comumente
falando, um pixel é um ponto indivisível na tela de exibição de um dispo-
sitivo - embora, mais recentemente, tenhamos vários tipos de pixel (http:
//ow.ly/atmIu). Não raramente, web designers preferem usar este tipo de me-
dida para fazer uma estrutura HTML/CSS em pixel perfect, não medindo es-
forços para estruturar seus documentos para que fiquem idênticos à imagem
do web design.
24
Casa do Código
Capítulo 3. layout fluído
Ponto (point). Pontos são tradicionalmente utilizados para CSSs de impres-são. Um ponto é igual a 1/72 polegadas. Assim como os pixels, pontos são
unidades de tamanho fixo.
Ems (em). O em é uma unidade escalável. Quando se trata do tamanho da
fonte, 1em é igual ao tamanho atual da fonte do elemento-pai. Por exemplo, se
o tamanho da fonte do elemento é 12pt, 1em é igual a 12pt. Ems são escaláveis
por natureza. 2em seria igual a 24pt, 0.5 seria 6pt, etc.
Porcentagem (%). A unidade porcento é muito parecida com a unidade em,
mas possui algumas diferenças fundamentais. Em primeiro lugar, o atual ta-
manho da fonte é igual a 100% (ou seja 12pt = 100%). Durante o uso da unidade
porcento, o texto permanece totalmente escalável para dispositivos móveis.
Como foi visto, a diferença básica entre pontos,
pixels, ems e porcentagens é que
os dois primeiros são unidades de medida fixas e os dois últimos, variáveis. Eles
são relativos, escaláveis e se adaptam e mantêm relações de tamanho com outros
elementos de um documento - eles possuem um contexto.
Portanto, fica claro que usar pts ou pxs não é o adequado para designs responsi-
vos (num primeiro momento, já que, com a prática e/ou experiência e/ou demanda
do projeto, pode ser necessário especificar alguns valores fixos em determinadas situações), o que nos deixa com as 2 outras opções. Mas qual a diferença entre usar
ems ou porcentagens?
Ems x Porcento
Devido às características que foram analisadas previamente, parece que é a
mesma coisa usar em ou porcentagem. Entretanto, existem algumas pequenas di-
ferenças.
O importante é saber que, quando falamos em layout, marcar unidades com por-
cento fornece uma exibição mais consistente e acessível para os visitantes. Quando as configurações de exibição do cliente se alteram, as medidas marcadas com % se alteram de maneira mais razoável, permitindo que a legibilidade seja preservada, bem como a acessibilidade e o design visual.
Portanto, apesar de ser possível usar qualquer um dos tipo de medidas relativas,
é meio que consenso entre os desenvolvedores - e, acredito, este consenso surgiu através de muitos testes e experiência com responsividade - usar porcentagem paralidar com tamanhos no layout (larguras, margens, espaçamentos, etc) e usar ems 25
3.2. A fórmula mágica do web design responsivo
Casa do Código
para lidar com fontes. em pode até ser usado fora de textos, mas vai ser sempre uma medida relativa ao font-size; já o porcento é relativo ao font-size quando usada em font-size, mas, quando usada com outras medidas, é relativa à largura
do elemento-pai.
3.2
A fórmula mágica do web design responsivo
Quando, desde sua concepção, um projeto tem por objetivo contar com design res-
ponsivo, é importante que os desenvolvedores envolvidos pensem de forma rela-
tiva, ou seja, em implementar este layout se valendo de medidas relativas no CSS.
Relembrando, deve-se pensar em atribuir as medidas do layout em porcentagens e o tamanho de fontes em ems ao invés de pixels.
Se, na antiga maneira de pensar, houvesse, por exemplo, um título com tama-
nho de fonte de 24px, então, seria preciso converter essa medida em em. E, se você está prestando atenção nos conteúdos que nos trouxeram até este ponto, você deveria estar se perguntando: "Mas como converter para em e continuar com a aparência de 24px?. E essa, meu caro colega de profissão, é, realmente, a pergunta certa a se fazer!
Existe uma fórmula para realizar esse cálculo. Uma forma simples e rápida de realizar a conversão de tamanhos absolutos para tamanhos relativos em layouts para a web. E não é nada com que você deva se preocupar ou sentir um arrependimento
profundo ao imaginar que deveria ter prestado mais atenção às aulas de matemática
da época do colégio. É uma fórmula tão simples que, por si só, contém a beleza e a elegância do design responsivo.