Como escolher a melhor unidade CSS para criar melhores layouts de site

As unidades CSS são um dos aspectos mais fundamentais a serem considerados ao criar um layout de site. Essas unidades definirão como seu design irá interagir em vários dispositivos.

Mas quando se trata de unidades CSS, há muitas opções para escolher e todas as opções não são iguais. As unidades CSS não se limitam apenas a fontes, portanto, como desenvolvedor front-end, você também deve entender como essas unidades afetam os layouts.

Neste artigo, mostrarei como funcionam as diferentes unidades CSS, para que você possa usá-las para criar melhores layouts e designs de sites.

Tipos de unidades CSS

As unidades CSS podem ser separadas nas seguintes categorias:

• Unidades absolutas
• Unidades relativas à fonte
• Unidades relativas da janela de visualização

Unidades absolutas

Algumas unidades dependem de determinados valores absolutos e não são afetadas por nenhum tamanho de tela ou fontes. A exibição dessas unidades pode variar dependendo das diferentes resoluções de tela, pois dependem do DPI (pontos por polegada) das telas.

Essas unidades são:

• px (pixels)
• em polegadas)
• cm (centímetro)
• mm (milímetro)
• pc (picas)
• pt (pontos)

Píxeis

Os pixels são a unidade mais comumente usada e aceita. E é considerada a base de medida para muitas outras unidades. Ele fornece o resultado mais consistente entre vários dispositivos.

O elemento box no exemplo a seguir tem uma altura de 150px e largura de 150px e permanecerá o mesmo em todos os tamanhos de tela.

.box{
height:150px;
width:150px;
}

Todas as outras unidades absolutas como pol (polegadas), cm (centímetro) e mm (milímetro) são unidades de medida do mundo real com muito poucos casos de uso de CSS do mundo real.

No entanto, ainda é bom entender a relação deles com os pixels, então é assim que eles se comparam:

• 1 pol = 96 px
• 1cm = 37,8px
• 1mm = 3,78px

Enquanto pc (picas) e pt (pontos) estão diretamente relacionados com polegadas.

• 1 pol = 72 pontos
• 1 pol = 6 peças

A relação entre todas as unidades absolutas pode ser demonstrada assim:

Remo

Além dos pixels, todas as outras unidades absolutas têm muito pouco ou nenhum caso de uso para CSS de tela, mas como são unidades de medida do mundo real, elas podem ser usadas efetivamente em CSS de impressão. (Caso você esteja se perguntando sobre pixels, eles também funcionam bem em CSS de impressão!)

Unidades relativas à fonte

Existem algumas unidades que dependem do tamanho da fonte ou da família de fontes do documento ou de seus elementos de nível pai. Isso inclui unidades como:

• em
• rem
• ex
• CH

Em

Em é uma unidade de comprimento relativo; depende do tamanho da fonte do elemento pai ou do documento. Por padrão, 1em é igual a 16px se nenhum font-size for definido.

Em herda o tamanho do tamanho da fonte de seu pai imediato. Digamos que, se um elemento pai tiver font-size:18px , 1em será medido como 18px para todos os seus filhos.

Aqui temos uma div .post com três filhos, .post-item , com um título e algum texto.

<div class="post">
<div class="post-item">
<h2>Title</h2>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
  </div>
<div class="post-item">
<h2>Title</h2>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
  </div>
<div class="post-item">
<h2>Title</h2>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
  </div>
</div>

Agora, o .post pai tem um font-size:20px e o elemento filho .post div tem seu próprio font-size:1.2em com padding:0.75em e margin:0.75em , então o preenchimento e a margem calculados serão de 18px (20px *1,2em*0,75em).

html{
font-size:20px;
}

.post{
font-size:20px;
}

.post div{
font-size:1.2em;
}

.post-item{
background:pink;
padding:0.75em;
margin:0.75em;
}

.post-item h2{
font-size:1.5em;
margin:0.5em 0;
}

.post-item p{
margin:0;
font-size: 1em;
}

Como você pode ver, os elementos filho estão herdando valores do pai.

A vantagem de usar em é que, se você decidir alterar o font-size , o padding e a margin de cada elemento proporcionalmente, basta alterar o tamanho da fonte do elemento pai e todos os outros elementos serão ajustados de acordo.

Esse não será o caso de unidades absolutas como px, onde você precisa ajustar cada elemento individualmente.

Essa natureza de herança pode ser um pouco complicada de gerenciar, no entanto, se os elementos aninhados também tiverem seu próprio font-size .

Como na demonstração anterior, se você envolver o título e o parágrafo dentro de outra div em um dos itens filhos, verá resultados estranhos.

<div class="post-item">
<div>
<h2>Title</h2>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
  	</div>
</div>

Como post-item tem um div aninhado, o tamanho base mudará de 24px para 28,8px (20px*1.2em*1.2em), e font-size e a margin para h2 mudarão para 43.2px (20px*1.2em*1.2em) *1,5em) e 14,4px (20px*1,2em*1,2em*0,5em), respectivamente.

Remo

Rem pode ser muito útil nestes tipos de situações porque eles sempre se referem ao tamanho da fonte do elemento raiz, não ao elemento pai.

Se você pegar o exemplo anterior e alterar as unidades de em para rem para .post div , verá todos os elementos filhos se corrigirem.

.post div{
  font-size:1.2rem;
}

Uma vez que a unidade é alterada de em para rem, sua base muda de div pai para elemento raiz, que tem um front-size:20px .

Portanto, o cálculo será 20px*1.2rem*value e h2 e p terão font-size e margin consistentes, independentemente de seu pai.

Ex

Ex é relativo à altura x da fonte atual e é muito raramente usado. A medição da altura x não é consistente; às vezes vem da própria fonte e às vezes o próprio navegador calcula.

Como em e rem, depende da fonte, mas a principal diferença é que ex também mudará quando você alterar a font-family , o que não é o caso das outras duas.

.box{
width:150ex;
height:150ex;
}

CH

Ch é semelhante a ex, mas não depende da altura x; em vez da largura do caractere zero (0). Também muda com font-family .

.box{
width:150ch;
height:150ch;
}

Unidades relativas da janela de visualização

Existem algumas unidades que dependem da altura e do tamanho da largura da janela de visualização, como:

• vh (altura da janela de visualização)
• vw (largura da janela de visualização)
• vmin (mínimo da janela de visualização)
• vmax (máximo da janela de visualização)

Vh

Vh (altura da janela de visualização) é medido como 1vh igual a 1% da altura da janela de visualização. Esta unidade é muito útil para criar elementos de altura total. Vh reage de forma semelhante à porcentagem, mas não depende da altura do elemento pai.

Você pode usar vh em qualquer lugar, mas o caso de uso mais comum de vh é para fazer elementos de altura total. Neste exemplo, a classe full-height criará um contêiner azul que terá 100% da altura da janela de visualização.

.full-height{
height:100vh;
background:blue;
}

Vw

Vw (largura da janela de visualização) é semelhante a vh, mas considera a largura, em vez da altura da janela de visualização. 1vw é igual a 1% da largura da janela de visualização. Essas unidades podem ser realmente úteis se você quiser criar uma janela de visualização responsiva com base na tipografia.

Neste exemplo, font-siz de h1 é 6% da largura da janela de visualização, portanto, se a largura da janela de visualização for 1000px, o tamanho da fonte será de 60px e, se a janela de visualização for de 500px, o tamanho da fonte será de 30px.

h1{
font-size:6vw;
}

Vmin

Vmin é calculado com base no valor mínimo da largura ou altura da janela de visualização, o que for menor. Digamos que você tenha um tamanho de janela de visualização de 1000px de altura por 800px de largura. 1vmin será igual a 8px.

Vmáx

Vmax é calculado exatamente ao contrário de vmin , onde é considerado o valor máximo da viewport.

Como o exemplo anterior da janela de visualização com 1000px de altura por 800px de largura, 1vmax será igual a 10px.

Agora vamos explorar como você pode usar vmin e vmax efetivamente. Usando nosso exemplo anterior, digamos que queremos ter um preenchimento e uma margem fluidos com base no tamanho da janela de visualização agora, em vez de um valor fixo.

Neste trecho de código, defini o preenchimento para 3vmax e a margem para 1.5vmin .

.post-item{
background pink;
padding:3vmax;
margin:1.5vmin;
}

O preenchimento e a margem mudarão de acordo com o tamanho da janela de visualização.

Porcentagem (%) unidade

A unidade de porcentagem(%) não pertence a nenhuma categoria específica mencionada acima, mas pode ser categorizada como uma unidade relativa. É relativo ao seu elemento pai.

A porcentagem está associada principalmente à altura e largura de um elemento, mas pode ser usada em qualquer lugar onde as unidades de comprimento CSS são permitidas.

A porcentagem é uma das unidades mais úteis para criar um layout responsivo ou fluido. Estruturas populares como Bootstrap, Foundation e Bulma usam porcentagem para seu layout base.

Aqui, a classe full-width terá 100% da largura de seu elemento pai.

.full-width{
width: 100%;
}

Conclusão

Eu cobri quase todas as unidades CSS disponíveis para uso. Dependendo de seus objetivos, alguns serão mais adequados do que outros. “Como desenvolvedor front-end, é sempre bom conhecer suas opções, porque você nunca sabe de qual pode precisar em seu próximo projeto. ”

Então, quais unidades você usa com mais frequência para obter o resultado desejado? Deixe-me saber na seção de comentários abaixo!