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 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, mostraremos como diferentes unidades CSS funcionam, para que você possa usá-las para criar layouts e designs de site melhores.

Tipos de unidades CSS

As unidades CSS podem ser separadas nas seguintes categorias:

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

Unidades Absolutas

Algumas unidades dependem de certos valores absolutos e não são afetadas por nenhum tamanho de tela ou fonte. 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 altura de 150px e largura de 150px e permanecerá o mesmo em todos os tamanhos de tela.

[css]
.caixa{
altura: 150px;
largura: 150px;
}
[/css]

Todas as outras unidades absolutas como em (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 sua relação com os pixels, então é assim que eles se comparam:

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

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

• 1in = 72pt
• 1 pol = 6 unidades

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

Rem

Além de 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 da 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. Portanto, se um elemento pai tiver font-size:18px , 1em será medido como 18px para todos os seus filhos.

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

[html]
<div class="post">
<div class="post-item">
<h2>Título</h2>
Lorem Ipsum é simplesmente um texto fictício da indústria tipográfica e de impressão. Lorem Ipsum tem sido o texto fictício padrão da indústria desde os anos 1500
</div>
<div class="post-item">
<h2>Título</h2>
Lorem Ipsum é simplesmente um texto fictício da indústria tipográfica e de impressão. Lorem Ipsum tem sido o texto fictício padrão da indústria desde os anos 1500
</div>
<div class="post-item">
<h2>Título</h2>
Lorem Ipsum é simplesmente um texto fictício da indústria tipográfica e de impressão. Lorem Ipsum tem sido o texto fictício padrão da indústria desde os anos 1500
</div>
</div>
[/html]

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 padding calculado e a margem serão 18px (20px *1,2em*0,75em).

[css]
html{
tamanho da fonte: 20px;
}

.publicar{
tamanho da fonte: 20px;
}

.post div{
tamanho da fonte: 1,2em;
}

.post-item{
fundo: rosa;
preenchimento: 0,75em;
margem:0,75em;
}

.post-item h2{
tamanho da fonte: 1,5em;
margem:0,5em 0;
}

.post-item p{
margem:0;
tamanho da fonte: 1em;
}
[/css]

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

A vantagem de usar em é que, se você decidir alterar proporcionalmente o font-size , padding e margin de cada elemento, 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ê deve 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ê agrupar o título e o parágrafo dentro de outro div em um dos itens filhos, verá resultados estranhos.

[html]
<div class="post-item">
<div>
<h2>Título</h2>
Lorem Ipsum é simplesmente um texto fictício da indústria tipográfica e de impressão. Lorem Ipsum tem sido o texto fictício padrão da indústria desde os anos 1500
</div>
</div>
[/html]

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 margin para h2 mudará para 43,2px (20px*1,2em*1,2em *1,5em) e 14,4px (20px*1,2em*1,2em*0,5em), respectivamente.

Rem

Rem pode ser muito útil nesses tipos de situações porque 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 filho se corrigirem.

[css]
.post div{
tamanho da fonte: 1,2 rem;
}
[/css]

Depois 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 p ambos terão font-size e margin consistentes, independentemente de seus pais.

Ex

Ex é relativo à altura x da fonte atual e 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.

[css]
.caixa{
largura:150ex;
altura:150ex;
}
[/css]

CH

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

[css]
.caixa{
largura: 150ch;
altura: 150 canais;
}
[/css]

Unidades Relativas da Janela de Visualização

Existem algumas unidades que dependem da altura e largura da viewport, 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 criar elementos de altura total. Neste exemplo, a classe full-height criará um contêiner azul que terá 100% da altura da viewport.

[css]
.altura toda{
altura: 100vh;
fundo: azul;
}
[/css]

vw

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

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

[css]
h1{
tamanho da fonte: 6vw;
}
[/css]

Vmin

Vmin é calculado com base no valor mínimo da largura ou altura da viewport, o que for menor. Digamos que você tenha um tamanho de viewport 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 do viewport.

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

Agora vamos explorar como você pode usar vmin e vmax de forma eficaz. Usando nosso exemplo anterior, digamos que queremos ter um preenchimento fluido e uma margem com base no tamanho da viewport agora, em vez de um valor fixo.

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

[css]
.post-item{
fundo rosa;
preenchimento: 3vmax;
margem: 1,5vmin;
}
[/css]

O preenchimento e a margem mudarão de acordo com o tamanho da viewport.

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 é 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 básico.

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

[css]
.largura completa{
largura: 100%;
}
[/css]

Conclusão

Cobrimos 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 qual delas pode precisar em seu próximo projeto.

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