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

Você aprenderá algumas unidades CSS para personalizar o tamanho da fonte do texto ao construir 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.

como mudar o nome do seu playstation

MAKEUSEO VÍDEO DO DIA

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 das telas variam muito. No entanto, eles podem ser usados se a mídia de saída for conhecida, como para um layout impresso.

Unidade	Descrição
cm	centímetros
milímetros	milímetros
dentro	polegadas (1 pol = 96 px = 2,54 cm)
px*	pixels (1 px = 1/96 de 1 polegada)
pt	pontos (1pt = 1/72 de 1in)
computador	espadas (1 pc = 12pt)

Comprimentos relativos

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

Unidade	Relativo a
em*	Em relação ao tamanho da fonte do elemento (2em significa 2 vezes o tamanho da fonte atual)
ex	Em relação à altura x da fonte atual (raramente usada)
CH	Em relação à largura do '0' (zero)
rem*	Relativo ao tamanho da fonte do elemento raiz
vw	Relativo a 1% da largura da janela de visualização*
vh	Relativo a 1% da altura da janela de visualização*
min	Relativo a 1% da dimensão menor da janela de visualização*
vmax	Relativo a 1% da dimensão maior da janela de visualização*
%	Em relação ao elemento pai

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 em 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 definidos apenas 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 permitirá que ele pareça do mesmo tamanho quando comparado a outro dispositivo.

menu iniciar e pesquisa não funciona

Abaixo está um exemplo: -

<div class="container"> 
     <div> 
       <h1>This is a paragraph</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 
         sit amet consectetur adipisicing elit. Hic quam beatae voluptatibus 
         amet possimus iure impedit assumenda distinctio aliquid debitis, autem 
         vel ullam aut, quod corporis ratione atque ducimus dolorum. 
       </p> 
     </div> 
   </div>

.container { 
  width: 100%; 
  height: 100vh; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
} 
.container div { 
  max-width: 500px; 
  padding: 5px 20px; 
  border: 1px grey solid; 
  border-radius: 10px; 
} 
p { 
  font-size: 16px; 
}

resultado

web-content-sized-in-pixel-css-unit-of-measurement

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 o texto) a ter o mesmo tamanho em todos os dispositivos.

2. Eu (M)

A unidade em recebeu o nome da letra maiúscula 'M' (em), pois 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 que tenha um tamanho de fonte de 16px. Se você criar um elemento de parágrafo nessa div e der 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 será traduzido para 32px. Considere o exemplo abaixo:

   <div class="div-one"> 
      <p class="one-em">1 em based on 10px</p> 
      <p class="two-em">2 em based on 10px</p> 
  </div> 
    <div class="div-two"> 
     <p class="one-em">1 em based on 10px</p> 
     <p class="two-em">2 em based on 10px</p> 
    </div> 
   </div>

.div-one { 
  font-size: 15px; 
} 
.div-two { 
  font-size: 20px; 
} 
.one-em { 
  font-size: 1em; 
} 
.two-em { 
  font-size: 2em; 
}

resultado

conteúdo da web dimensionado em unidade de medida em css

Você pode ver como eles podem 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 onde os elementos podem não ser dimensionados corretamente com base em uma herança complexa de tamanhos na árvore DOM.

3. Rem (Raiz 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 da fonte padrão especificado pelo usuário nas configurações do navegador ou por você, o desenvolvedor.

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

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

   <div class="div-one"> 
     <!-- EM --> 
     <p class="one-em">1 em based on container (40px)</p> 
     <p class="two-em">2 em based on container (40px)</p> 
     <!-- REM --> 
     <p class="one-rem">1 rem based on root (16px)</p> 
     <p class="two-rem">2 rem based on root (16px)</p> 
   </div>

.div-one { 
  font-size: 40px; 
} 
.one-em { 
  font-size: 1em; 
} 
.two-em { 
  font-size: 2em; 
} 
.one-rem { 
  font-size: 1rem; 
} 
.two-rem { 
  font-size: 2rem; 
}

resultado

conteúdo da web dimensionado em unidade de medida rem css

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

a restauração do sistema não funciona Windows 10

Px 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 o REM ao trabalhar com conteúdo de texto em suas páginas da web. REM ganha a corrida. Melhor estilização e dimensionamento de seu conteúdo com REM adicionam elegância 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.