Unidades de medida css

Em nossa vida, utilizamos diversas unidades de medida em várias situações. Ao medirmos o nosso tamanho, por exemplo, utilizamos metro. Quando queremos referenciar alguma distância entre cidades, utilizamos quilômetro. 

Na programação não é diferente. Ao posicionarmos os elementos do nosso site em tela, podemos definir uma largura, uma distância e, até mesmo, uma altura.

Nesse artigo, abordaremos sobre CSS e como utilizar essas unidades de medida para estilizar a nossa aplicação web. Bora lá?

O que é CSS?

O CSS, ou Cascading Style Sheets, é uma linguagem de estilo. Através dela, é possível posicionar e estilizar os elementos em nosso site. Enquanto o HTML fica responsável pela estruturação da página, o CSS torna a aplicação visualmente mais agradável e interativa para o usuário.

O que são unidades de medida no CSS?

Ao usarmos o CSS para estilizar os elementos do nosso projeto, sentimos a necessidade de utilizar valores numéricos em diversas propriedades, como, por exemplo, ao definir uma largura (width), uma altura (height), o tamanho de uma fonte (font-size), entre muitas outras.

Para que essas propriedades recebam corretamente os seus valores e, consequentemente, alcancem a estilização desejada, é necessário a utilização das unidades de medida.

Quais as unidades de medida do CSS?

Existem diversas opções de unidades de medida disponíveis no CSS, divididas em dois grupos: as medidas absolutas e as medidas relativas. As mais conhecidas são os píxeis e a porcentagem. Porém, existem situações onde essas unidades de medida não são as mais adequadas para serem utilizadas. 

A seguir entenderemos qual a diferença entre esses grupos e quais as unidades disponíveis no CSS.

Medidas Absolutas

São medidas fixas, que não se alteram de acordo com o dispositivo onde o site está sendo exibido. Não existe nenhum elemento ou referência que influencie no seu tamanho. Ou seja, ao declararmos um valor em medida absoluta, o tamanho final da propriedade será o mesmo declarado. 

Esse tipo de medida é utilizado quando temos conhecimento pleno do tamanho e das características físicas de onde nosso site será exibido. Mas será que é possível sabermos o tamanho ou a largura da tela de todos os dispositivos existentes no mundo? Difícil, né? 

Lembre-se: como Pessoa Desenvolvedora Frontend é necessário tornar as nossas aplicações responsivas e acessíveis em qualquer tamanho de tela. Portanto, muito cuidado ao utilizar essas medidas e quebrar por completo o layout do seu site.

Píxeis (px)

Tenho certeza que em algum momento da sua vida como programador(a), você já escutou falar ou, até mesmo, utilizou os píxeis em suas estilizações. É uma unidade de medida muito famosa e utilizada como unidade principal nos projetos de grande parte da comunidade de desenvolvedores.

Mas, afinal, o que é píxel? Basicamente, é um ponto luminoso em nosso monitor. Junto com os outros pontos do mesmo tipo, formam a imagem que vemos em nossa tela.

Porém, na programação, o píxel utilizado pelo CSS não é o mesmo píxel da tela do nosso dispositivo. Este é conhecido como píxel de referência, e possui um tamanho maior que o píxel real. Isso torna essa medida ainda mais abstrata. 

Sua utilização é bem comum por trazer uma proximidade do tamanho dos elementos entre telas diferentes. Mas não se esqueça, precisamos estar sempre atentos a questão da responsividade.

Points (pt)

O ponto é usado para medir o tamanho da fonte e os espaçamentos entre os itens de uma página impressa.

Essa unidade é raramente utilizada, e, até mesmo, não recomendada, para estilização de uma aplicação web. Seu uso está diretamente relacionado com a tipografia. Por isso, é mais conhecida entre os designers.

in (inches/polegadas)

As polegadas, apesar de existirem no desenvolvimento web, são pouco utilizadas para estilização. A sua principal funcionalidade é medir objetos, como, por exemplo, a televisão que você tem aí na sua casa. Já reparou que medimos o tamanho da tela utilizando as polegadas? 

Centímetro e Milímetro (cm / mm)

Essa unidade de medida é muito conhecida e utilizada por nós no nosso dia-a-dia no mundo real. Porém, ao trazer para o mundo da programação, seu uso não costuma ser frequente e nem recomendado para projetos web. 

Paica (pc)

A paica, assim como os points, são unidades de medidas utilizadas para padronização do tamanho das fontes e espaçamentos em folhas impressas. Seu uso está diretamente relacionado à tipografia e não é muito comum no CSS.

Medidas Relativas

As medidas relativas são unidades flexíveis e que sofrem alterações conforme o dispositivo ou preferências do usuário. Essas unidades aparecem com um certo domínio quando o assunto é estilização de páginas na web, principalmente, por se adaptar a diferentes tamanhos de tela e tornar o nosso site responsivo.

Ems (em)

Essa, sem dúvidas, é uma das unidades mais utilizadas no CSS. Sua funcionalidade está relacionada à mudança do tamanho dos elementos filhos conforme o tamanho da fonte do elemento pai. Ou seja, 1em significa que o tamanho desse elemento é uma vez o font-size do pai. 

Vamos ver na prática como funciona, o entendimento será melhor. 

Digamos que em nosso HTML, exista uma tag div, contendo um parágrafo. 

Agora, vamos estilizar os nossos elementos, colocando um font-size de 32px no elemento pai e um font-size de 2em no elemento filho.

Dessa forma, estamos dizendo que o font-size do parágrafo será 2 vezes o tamanho da fonte da div, por ser o seu elemento pai. Ou seja, nesse exemplo, 2em seria a mesma coisa que 64px.

Rems (rem, “root em”)

O rem surgiu a partir do em, que acabamos de ver anteriormente. As suas utilizações são bem semelhantes, porém, ao utilizarmos o rem, estamos dizendo que o valor é igual ao tamanho da fonte da raiz do documento. Geralmente, como padrão dos navegadores, esse font-size do root é de 16px. Logo, 1rem é igual a 16px. 

Porém, isso pode ser facilmente alterado pelo usuário, de acordo com as suas preferências. Caso isso aconteça, todos os elementos que possuírem essa unidade de medida como valor de suas propriedades, também sofrerão essas modificações.

Faça o teste no seu navegador. Estilize algum elemento do seu HTML com os valores em rem. Feito isso, abra as configurações de aparência, altere o tamanho da fonte padrão e veja o resultado em tela.

Porcentagem (%)

Trabalhando com o desenvolvimento front-end, será muito comum utilizar as porcentagens ao definir valores de uma propriedade no CSS. Isso se dá graças a sua flexibilidade em relação ao elemento pai, fazendo com que o elemento filho se adapte melhor a diferentes situações e tamanhos de tela.

Vamos ver na prática como funciona!

Em nosso HTML, vamos criar duas divs.

Já em nosso CSS, vamos estilizar definindo uma largura (width), uma altura (height) e um background-color para visualizarmos esses elementos em tela.

Em nosso navegador, teremos o seguinte resultado: 

Repare que o elemento filho ocupou 30% do tamanho máximo do elemento pai. Caso visualizássemos essa aplicação em outros tamanhos de tela, esses elementos se adaptariam e sofreriam alterações em seus valores.

Ex

Essa unidade é raramente utilizada no CSS. Diferente do em e rem, vistos anteriormente, essa unidade não está relacionada ao tamanho da fonte (font-size), mas sim, ao tamanho do caractere do estilo de fonte (font-family) que está sendo utilizado em nosso elemento.

Ch

O ch (character unit) é uma unidade de medida utilizada para definir, geralmente, a largura de uma frase ou palavra em nosso documento. Ou seja, se estipularmos um valor de 20ch na width de um parágrafo, este só comportará 20 caracteres por linha. Simples assim.

Vejamos um exemplo utilizando 100ch e depois 20ch. Repare na diferença como os parágrafos irão se comportar em nossa tela.

Vw (viewport width)

Para entendermos essa unidade de medida, basta traduzirmos o seu nome. Viewport é janela de exibição, e width é largura. Ou seja, essa medida está relacionada com a largura da tela dos nossos dispositivos. Ao definirmos um valor como 1vw, significa que aquele elemento está ocupando 1% da largura da janela do nosso navegador. Caso o nosso elemento possua 100vw como valor, consequentemente, ele estará ocupando toda a largura da tela.

Esse valor se altera entre dispositivos, sendo, por exemplo, maior no desktop se comparado ao mobile.

Vh (viewport height)

Essa unidade funciona da mesma forma que o vw, que acabamos de abordar. Porém, ao invés de utilizarmos a largura das telas como referência, utilizaremos a sua altura (height).

Vmin (viewport minimun)

Essa unidade também está relacionada as dimensões de uma tela, porém, a diferença se comparada as anteriores, é que esta utilizará como referência a menor dimensão da viewport, sendo ela, largura ou altura. 

Por exemplo, digamos que estamos criando um projeto numa tela de 1024px de largura e 852px de altura. Nesse caso, ao utilizarmos o vmin, o seu valor será de 1% da altura, ou seja, 8.52px. 

Vmax (viewport maximum)

Assim como vmin, essa unidade se relaciona com as dimensões da viewport. A diferença, como o próprio nome já sugere, é que o vmax utiliza como referência a maior dimensão.

Utilizando o exemplo anterior de uma tela de 1024px de largura e 852px de altura, ao utilizarmos o vmax, o seu valor será de 1% da largura, ou seja, 10.24px.

Conclusão

Com diversas unidades de medidas à nossa disposição no CSS, surge aquela famosa dúvida: qual devo utilizar em meus projetos? 

A resposta é simples: depende. Será necessário avaliar o seu objetivo com determinado elemento na tela, assim como os padrões já utilizados pela equipe, caso você faça parte de uma.

Porém, para que você esteja preparado para enfrentar qualquer situação, é importante conhecer todas as unidades de medida. Aumentar o nosso leque de ferramentas e possibilidades de estilização nos torna uma pessoa desenvolvedora mais preparada para o mercado de trabalho.

Aqui na Kenzie Academy Brasil, ensinamos aos nossos alunos a melhor forma de utilizar o CSS, usando, como exemplo, projetos reais do mercado. Conheça mais sobre a nossa formação de Desenvolvimento Full Stack.