# Unidades de CSS moderno: rem, vh, vw, vmin, vmax, ex, ch
> Unidades CSS: rem, vh, vw, vmin, vmax, ex, ch explicadas. Guia completo de unidades modernas para layouts flexíveis e tipografia responsiva. Domine!
URL: https://dpw.dev/css/unidades-css-rem-vh-vw-vmin-vmax-ex-ch/
Publicado em: 2014-11-11
Categoria: css
Tags: basico-da-web, layout, web-design-responsivo
Autor: Tárcio Zemel
Tradicionalmente, a unidade de CSS `px` era usada para quase todas as medidas. Mas as coisas mudaram há tempos, e o web dev moderno conta com **unidades de CSS moderno** para os mais diversos casos de uso.
Ao fazer um site, é fácil ficarmos presos quando trabalhamos com técnicas CSS que conhecemos bem, inclusive, **unidades CSS**.
Mas isso nos coloca em desvantagem quando novos problemas vem à tona. À medida que a Web evolui, a procura por novas soluções segue o mesmo caminho.
Então, web designers e desenvolvedores front end não temos escolha: é preciso conhecer bem o conjunto de ferramentas e possibilidades disponíveis para criar sites.
Isso significa conhecer, inclusive, as ferramentas "especiais", as que não são utilizados tão frequentemente, mas, quando necessárias, mostram-se as ferramentas certas para tarefas específicas.
Algumas dessas "ferramentas" CSS são cada uma das **unidades de medida CSS** existentes. Já estamos habituados com `px` e `em`, mas existem outras mais para usar na hora de criar CSS.
É hora de conhecer **unidades de CSS moderno: rem, vh, vw, vmin, vmax, ex e ch**!
## `rem`
Começando com algo similar ao que a maioria já conhecemos, a unidade `em` é definida como o `font-size` atual.
Assim, por exemplo, se se definir um tamanho de fonte no elemento ``, o valor de `em` de qualquer elemento-filho dentro de `` será igual àquele tamanho de fonte.
```html
Teste
```
```scss
body {
font-size: 14px;
}
div {
font-size: 1.2em; /* calculado como 14px * 1.2, ou 16.8px */
}
```
A `div` terá um font-size de `1.2em`, Isto é, 1,2 vezes o tamanho da fonte que herdou -- neste caso, `14px`. O resultado é `16.8px`.
Entretanto, o que acontece quando se tem um elemento com valor `em` dentro de outro elemento com valor `em`?
No trecho a seguir, foi aplicado o mesmo CSS acima; cada `div` herda a `font-size` de seu elemento-pai, permitindo aumentar gradualmente os tamanhos de fonte.
```html
Teste
Teste
Teste
```
Demonstração funcional:
[Exemplo no CodePen](https://codepen.io/anon/pen/qBeWQj)
Embora isso possa ser desejado em alguns casos ao criar CSS, muitas vezes é possível simplesmente confiar em uma única métrica para o dimensionamento.
Neste caso, usa-se `rem` (o "r" significa "root": "root em"), que é igual ao tamanho da fonte fixada ao elemento-raiz (quase sempre ``).
```scss
html {
font-size: 14px;
}
div {
font-size: 1.2rem;
}
```
Em qualquer uma das `div`s aninhadas do exemplo anterior de codigo CSS, a fonte terá o tamanho equivalente de `16.8px`.
A menos que seja alterado, o valor padrão de rem é `16px`, com a vantagem de responder a alterações no nível de zoom.
### `rem` é bom para grids
`rem` não é útil apenas para dimensionamento de fontes.
Por exemplo, é possível basear um sistema de grids inteiro ou uma biblioteca de estilos no tamanho de fonte do elemento raiz `` usando `em` para escalar em locais específicos.
Isto confere um dimensionamento de fonte mais _previsível_ e _escalável_.
`rem` não mudará, não importa o quão profundamente esteja aninhado, portanto, para espaçamento consistente entre/ao redor de elementos, também é uma escolha confiável.
## `vh` e `vw`
> **Dica:** Relacionado a web design responsivo, veja nosso artigo sobre [imagens responsivas com srcset e sizes](/css/imagens-responsivas-srcset-sizes/).
Muitas técnicas de **web design responsivo** dependem muito de regras percentuais. No entanto, medidas CSS percentuais nem sempre são a melhor solução para todos os problemas.
As unidades `vh` e `vw` são úteis quando é preciso usar a largura ou a altura da viewport.
A medida `vh` é igual a 1/100 da altura da viewport. Então, por exemplo, se a altura do navegador é `900px`, `1vh` equivale a `9px`.
E, analogamente, se a largura da viewport é `750px`, `1vw` equivale a `7.5px`.
Há infinitas possibilidades de uso com essas unidades de CSS moderno em uma folha de estilos.
Por exemplo, um slider de altura total (_full height_) poderia ser conseguido com uma única linha de CSS:
```scss
.slide {
height: 100vh;
}
```
Imagine que seja preciso um título que preencha a largura da tela. Como seria um CSS para isso?
Para conseguir, é possível definir um tamanho de fonte com `vw`, que vai escalar segundo a largura do navegador.
[Exemplo no CodePen](https://codepen.io/anon/pen/NWQKoV)
## `vmin` e `vmax`
Enquanto `vh` e `vw` estão sempre relacionados com a altura e largura da viewport, respectivamente, as unidades de CSS moderno `vmin` e `vmax` estão relacionados com o valor _máximo_ e _mínimo_ destas larguras e alturas, dependendo de qual é a menor e a maior.
Por exemplo, se o navegador foi ajustado para `1100px` de largura e a altura `700px`, `1vmin` seria `7px` e `1vmax` seria `11px`.
Se a largura foi ajustada para `800px` e a altura definida para `1080px`, vmin seria igual a `8px` e vmax `10.8px`.
Mas quando usar estes valores de unidades de medida CSS em um site/app?
Imagine que seja preciso um elemento sempre visível na tela. Usar uma altura e largura ajustada para um valor abaixo de `100vmin` permitiria isso.
Por exemplo, um elemento quadrado que sempre toca pelo menos 2 lados da tela pode ser definido assim:
```scss
.box {
height: 100vmin;
width: 100vmin;
}
```
Se for preciso uma caixa quadrada que sempre cobre a viewport visível (tocando todos os 4 lados da tela o tempo todo), basta usar as mesmas regras com `vmax`.
```scss
.box {
height: 100vmax;
width: 100vmax;
}
```
Combinações dessas regras fornecem maneiras muito flexíveis para utilizar o tamanho da viewport de maneiras novas e emocionantes em códigos de CSS! :-)
## `ex` e `ch`
As unidades `ex` e `ch`, semelhante a `em` e `rem`, contam com a fonte e tamanho da fonte atuais.
No entanto, ao contrário de `em` e `rem`, essas unidades também contam com `font-family` como são determinados com base em medidas específicas de cada fonte.
A unidade `ch` ("character unit" ou "unidade-caractere") é definida como sendo a "medida avançada" da largura do caractere zero ("0").
Algumas considerações muito interessantes sobre o que isso significa [podem ser encontradas no blog de Eric Meyers](http://meyerweb.com/eric/thoughts/2012/05/15/defining-ch/), mas o conceito básico é:
Dada uma fonte com espaçamento uniforme, uma caixa com uma largura de N unidades-caractere, como `width: 40ch`, sempre pode conter uma string com 40 caracteres nesta determinada fonte.
A unidade `ex` é definida como "a altura-x da fonte atual ou a metade de 1em".
A "altura-x" de uma determinada fonte é a altura do caractere "x" em minúsculo dessa fonte.
Muitas vezes, trata-se da "marca do meio" da fonte.
Altura-x: a altura do "x" minúsculo (leia mais em [The Anatomy of Web Typography](https://webdesign.tutsplus.com/articles/the-anatomy-of-web-typography--webdesign-10533))
Há muitos usos para este tipo de unidade em código CSS, sendo a maioria relacionada a micro-ajustes tipográficos.
Por exemplo, o elemento `sup` pode ser "empurrado" para cima na linha usando posição relativa e um valor inferior do `1ex`. Similarmente, é possível "puxar" um elemento `sub` para baixo.
Os navegadores já têm seus padrões para estas tags, mas se um controle mais granular for preciso, é possível lidar com a situação de uma maneira mais explícita, como:
```scss
sup {
bottom: 1ex;
position: relative;
}
sub {
bottom: -1ex;
position: relative;
}
```
## Conclusão sobre unidades de CSS moderno
Ficar atento sobre o desenvolvimento contínuo e expansão das CSS é extremamente importante para que você tenha ciência de todas as ferramentas e possibilidades disponíveis para fazer um site. Talvez você encontre um problema específico, que exija uma solução inesperada utilizando uma dessas unidades de medida menos conhecidas.
Não é sempre que essas unidades de CSS moderno serão usadas (certamente, quase nunca todas de uma vez), mas conhecer e saber quando aplicar `rem`, `vh`, `vw`, `vmin`, `vmax`, `ex` e `ch` abre uma gama de possibilidades e contingências possíveis para quaisquer situações que apareçam ao criar CSS.
E você, já passou por alguma situação ou teve que usar as unidades de CSS moderno para criar sites? Comente!
---
Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml