Guia Iniciante para Unidades de Medida em CSS

Este é um artigo para aqueles que estão começando no front-end ou estão querendo relembrar das unidades de medidas utilizadas no CSS.

CSS é uma ferramenta indispensável. Elá permite que o Dev controle a aparência e o layout de uma página web garantindo uma experiência de usuário agradável. No entanto, antes de mergulharmos de cabeça no mundo do design web, é crucial entender um dos pilares fundamentais do CSS: as unidades de medida.

Pixels (PX)

Ao começar a explorar as unidades de medida CSS, é natural começar com a unidade "px", abreviação de "pixels". Os pixels são uma unidade de medida absoluta, o que significa que eles têm um valor fixo e não dependem de outros fatores, como o tamanho da tela ou a configuração do dispositivo. Aqui estão alguns pontos importantes a serem considerados sobre os pixels:

• Vantagens
  Oferecem uma consistência visual sólida. Quando você usa "px" para definir tamanhos de fonte, margens, bordas e elementos gráficos, esses elementos aparecem da mesma forma em todos os dispositivos, proporcionando uma experiência de usuário previsível.

• Desvantagem
  No entanto, uma desvantagem dos pixels é que eles não se adaptam automaticamente a diferentes tamanhos de tela. Isso pode ser um desafio em um mundo onde os dispositivos têm uma ampla gama de resoluções. Portanto, ao usar "px", é importante estar ciente de como isso afetará a responsividade do seu design.

Curiosidade sobre PX:

Você sabia que o Pixel do CSS não é realmente um pixel da tela do dispositivo. Em vez disso o CSS utiliza de algo que chamamos de "Pixel de referência" que é geralmente maior que o pixel físico real.

Porcentagem (%)

As porcentagens, representadas pela unidade de medida "%", são fundamentais no mundo do CSS, especialmente quando se trata de criar layouts flexíveis e responsivos. Ao contrário dos pixels, as porcentagens são unidades de medida relativas que se baseiam no tamanho do elemento pai. Aqui estão alguns conceitos-chave relacionados às porcentagens:

• Vantagens

Uma das maiores vantagens das porcentagens é a capacidade de criar layouts responsivos. Elementos dimensionados em porcentagem se adaptam automaticamente ao tamanho do seu contêiner, o que significa que eles podem se ajustar a diferentes tamanhos de tela.

• Escalabilidade

As porcentagens são ideais para criar designs escaláveis. Isso é particularmente útil ao definir larguras de contêineres que se expandem ou contraem conforme o tamanho da janela do navegador.

Unidades Relativas "em" e "rem"

As unidades "em" e "rem" são unidades de medida relativas no CSS que têm uma relação direta com o tamanho da fonte. Essas unidades oferecem uma maneira flexível e escalável de definir tamanhos e espaçamentos em relação ao texto. Vamos explorar essas unidades em detalhes:

• Unidade "em":

A unidade "em" é relativa ao tamanho da fonte do elemento pai.
Se você definir um elemento com um tamanho de fonte de 1.5em, ele terá 1,5 vezes o tamanho da fonte do seu elemento pai.
3.2. Unidade "rem" (Root em):

• Unidade "rem"

É relativa ao tamanho da fonte do elemento raiz (normalmente, o elemento ).
Isso a torna uma escolha poderosa para criar layouts escaláveis, pois não depende da hierarquia de elementos pai-filho.

• Vantagens das Unidades Relativas:

As unidades "em" e "rem" facilitam a criação de layouts responsivos e acessíveis, pois se adaptam automaticamente ao tamanho da fonte definido pelo usuário ou ao tamanho da fonte raiz.
Elas são particularmente úteis para definir margens, preenchimentos e tamanhos de fonte, permitindo uma experiência de usuário consistente e adaptável.

Unidades de Medida de Viewport: "vw", "vh", "vmin" e "vmax"

As unidades de medida de viewport, ou unidades de visualização, são uma categoria especial de unidades de medida CSS que estão diretamente relacionadas ao tamanho da janela de visualização do navegador. Elas permitem que você dimensione elementos com base na altura e largura visíveis na tela. Vamos explorar essas unidades de medida de viewport em detalhes:

• Unidade "vw" (Viewport Width):

A unidade "vw" representa uma fração da largura total da janela de visualização do navegador.
Por exemplo, 1vw é igual a 1% da largura total da janela.

• Unidade "vh" (Viewport Height):

A unidade "vh" representa uma fração da altura total da janela de visualização do navegador.
1vh é igual a 1% da altura total da janela.

• Unidade "vmin" (Viewport Minimum):

A unidade "vmin" é igual ao valor mínimo entre "vw" e "vh".
Isso significa que ela se baseia na menor dimensão da janela de visualização, tornando-a útil para criar elementos proporcionais em qualquer direção.

• Unidade "vmax" (Viewport Maximum):

A unidade "vmax" é igual ao valor máximo entre "vw" e "vh".
Ela se baseia na maior dimensão da janela de visualização, permitindo que você crie elementos proporcionais que se ajustam à tela.

• Vantagens das Unidades de Medida de Viewport:

As unidades de viewport são ideais para criar layouts que se adaptam perfeitamente ao tamanho da tela, independentemente do dispositivo.
Elas são especialmente úteis para criar designs responsivos e elementos proporcionais, como fontes, imagens e espaçamentos.

Unidades de Texto: "ex" e "ch"

As unidades "ex" e "ch" são unidades de medida de texto no CSS que se baseiam no tamanho da fonte utilizada em um elemento. Elas são úteis para dimensionar elementos em relação ao texto e à largura dos caracteres. Vamos explorar essas unidades em detalhes:

• Unidade "ex":

A unidade "ex" é baseada na altura da letra minúscula "x" no tipo de letra utilizado.
Ela é útil para dimensionar elementos com base na altura do texto, como a altura de uma caixa que acomodará o texto.

• Unidade "ch" (Character Width):

A unidade "ch" é baseada na largura de um caractere "0" no tipo de letra utilizado.
Ela permite dimensionar elementos com base na largura dos caracteres, como definir a largura de uma caixa para acomodar um determinado número de caracteres.

• Vantagens das Unidades de Texto:

As unidades "ex" e "ch" proporcionam uma maneira consistente de dimensionar elementos em relação ao texto, independentemente do tamanho da fonte utilizado.
Elas são especialmente úteis ao criar elementos que devem se adaptar ao conteúdo de texto dinâmico, garantindo uma aparência harmoniosa.

Conclusão

Com uma compreensão sólida das unidades de medida CSS, você está pronto para criar sites que se destacam no mundo digital, oferecendo uma experiência de usuário excepcional em qualquer dispositivo ou tela. Boa sorte em sua jornada de desenvolvimento web, e que seus projetos sejam sempre responsivos e visualmente impressionantes!