P x vs. Em vs. Rem: Qual unidade CSS você deve usar?

Você aprenderá algumas unidades CSS para personalizar o tamanho da fonte do texto ao criar páginas da web. Existem muitas unidades como pt, pc, ex, etc., mas na maioria dos casos você deve se concentrar nas três unidades mais populares: px, em e rem. Muitos desenvolvedores geralmente não entendem quais são as diferenças entre essas unidades; então, abaixo está uma explicação detalhada dessas unidades.

Antes de prosseguir, observe que existem dois tipos de comprimentos de unidade: absoluto e relativo.

Comprimentos absolutos

As unidades de comprimento absoluto são fixas e um comprimento expresso em qualquer uma delas aparecerá exatamente com esse tamanho.

Unidades de comprimento absoluto não são recomendadas para uso na tela, porque os tamanhos de tela variam muito. No entanto, eles podem ser usados ​​se a mídia de saída for conhecida, como para um layout impresso.

Comprimentos Relativos

As unidades de comprimento relativo especificam um comprimento relativo a outra propriedade de comprimento. As unidades de comprimento relativo escalam melhor entre diferentes meios de renderização.

1. Px (Pixel)

Pixel é provavelmente a unidade mais usada em CSS e é muito popular quando se trata de definir o tamanho da fonte do texto nas páginas da web. Um pixel (1px) é definido como 1/96 de polegada na mídia impressa.

Em telas de computador, no entanto, eles geralmente não estão relacionados a medidas reais, como centímetros e polegadas, como você pode pensar; eles são apenas definidos para serem pequenos, mas visíveis. O que é considerado visível depende do dispositivo.

Dispositivos diferentes têm um número diferente de pixels por polegada em suas telas, o que é conhecido como densidade de pixels. Se você usasse o número de pixels físicos na tela de um dispositivo para determinar o tamanho do conteúdo desse dispositivo, teria problemas para fazer com que as coisas parecessem iguais em telas de todos os tamanhos.

É aí que entra a proporção de pixels do dispositivo. É essencialmente apenas uma maneira de calcular quanto espaço um pixel CSS (1px) ocupará na tela do dispositivo que fará com que pareça do mesmo tamanho quando comparado a outro dispositivo.

Abaixo está um exemplo:-

<classe div ="recipiente">
<div>
<h1>Este é um parágrafo</h1>
<p>
 Lorem ipsum, dolor sit amet consectetur adipisicing elit.
 Reprehenderit incidunt perferendis iure veritatis cupiditate delectus
 omnis at! Officiis praesentium officia, nemo veniam consequatur
 nostrum sunt aliquid ipsam, corporis quas quaerat. Lorem ipsum dolor
 sente-se amet consectetur adipisicing elit. Hic quam beatae voluptatibus
 amet possimus iure impedet assunnda distinctio aliquid debitis, autem
 vel ullam aut, quod corporis ratione atque ducimus dolorum.
</p>
</div>
</div>

.recipiente {
 largura: 100%;
 altura: 100vh;
 exibição: flexível;
 justificar-conteúdo: centro;
 itens de alinhamento: centro;
}
.recipientediv {
 largura máxima: 500px;
 preenchimento: 5px 20px;
 borda: 1px sólido cinza;
 raio da borda: 10px;
}
p {
 tamanho da fonte: 16px;
}

saída

A caixa superior é a aparência quando exibida em uma tela maior, como um laptop, e a caixa inferior é a aparência quando exibido em uma tela menor, como um telefone.

Observe como o texto em ambas as caixas é do mesmo tamanho. É basicamente assim que o pixel funciona. Ele ajuda o conteúdo da web (não apenas texto) a ter a mesma aparência em todos os dispositivos.

2. Em (M)

A unidade em recebeu o nome da letra maiúscula 'M' (em), já que a maioria das unidades CSS vem da tipografia. Ele usa o tamanho da fonte atual do elemento pai como base. Ele pode ser usado para aumentar ou diminuir o tamanho da fonte de um elemento com base no tamanho da fonte herdado do pai.

Digamos que você tenha um div pai com tamanho de fonte de 16px. Se você criar um elemento de parágrafo nesse div e fornecer a ele um tamanho de fonte de 1em, o tamanho da fonte do parágrafo será de 16px.

No entanto, se você der a outro parágrafo o tamanho da fonte de 2em, isso se traduzirá em 32px. Considere o exemplo abaixo:

<classe div ="div-um">
<p classe="one-em">1 em baseado em 10px</p>
<p classe="dois em">2 em baseado em 10px</p>
</div>
<classe div ="div-dois">
<p classe="one-em">1 em baseado em 10px</p>
<p classe="dois em">2 em baseado em 10px</p>
</div>
</div>

.div-one {
 tamanho da fonte: 15px;
}
.div-dois {
 tamanho da fonte: 20px;
}
.one-em {
 tamanho da fonte: 1em;
}
.dois-em {
 tamanho da fonte: 2em;
}

saída

Você pode ver como o em pode aumentar o tamanho do texto e como ele é afetado pelo tamanho da fonte atual herdado do contêiner pai. Não é aconselhável usá-los, especialmente em páginas estruturadas complexas.

Se não for usado corretamente, você pode ter problemas de dimensionamento em que os elementos podem não ser dimensionados adequadamente com base em uma herança complexa de tamanhos na árvore DOM.

3. Rem (Root Em)

Rem funciona quase da mesma forma que em, mas a principal diferença é que rem apenas faz referência ao tamanho da fonte do elemento raiz na página, em vez do tamanho da fonte do pai. O tamanho da fonte raiz é o tamanho de fonte padrão especificado pelo usuário nas configurações do navegador ou por você, o desenvolvedor.

O tamanho de fonte padrão de um navegador da Web é geralmente 16px, portanto, 1rem será 16px e 2rem será 32px. No entanto, no caso em que o tamanho da fonte raiz é alterado para 10px, por exemplo; 1rem será 10px e 2rem será 20px.

Aqui está um exemplo para tornar as coisas mais claras:

<classe div ="div-um">
<!-- EM -->
<p classe="one-em">1 em com base no contêiner (40px)</p>
<p classe="dois em">2 em com base no contêiner (40px)</p>
<!-- REM -->
<p classe="um-rem">1 rem baseado na raiz (16px)</p>
<p classe="dois-rem">2 rem baseado na raiz (16px)</p>
</div>

.div-one {
 tamanho da fonte: 40px;
}
.one-em {
 tamanho da fonte: 1em;
}
.dois-em {
 tamanho da fonte: 2em;
}
.one-rem {
 tamanho da fonte: 1rem;
}
.dois-rem {
 tamanho da fonte: 2rem;
}

saída

Como você pode ver, os parágrafos definidos com unidades REM não são perturbados pelo tamanho da fonte declarada em nosso contêiner e são renderizados estritamente em relação ao tamanho da fonte raiz definido no seletor de elemento HTML.

P x vs. Em vs. Rem: Qual unidade é a melhor?

Em não é recomendado devido à possibilidade de ter uma hierarquia complexa de elementos aninhados. O REM geralmente é dimensionado adequadamente com o novo tamanho de fonte padrão/base especificado nas configurações do navegador, em oposição ao PX. Isso explica por que você deve usar REM ao trabalhar com conteúdo de texto em suas páginas da web. REM vence a corrida. Melhor estilo e dimensionamento de seu conteúdo com REM adicionam estilo ao seu site, pois é ideal para criadores de sites. Medições pontuais do seu conteúdo ditarão a aparência do seu site, no entanto, você precisará ser criativo.