Escolher a unidade de medida correta é fundamental para criar designs consistentes e responsivos.
Pixels são unidades de tamanho fixo. Um elemento com width: 200px terá sempre 200 pixels de largura,
independentemente do tamanho da tela ou do tamanho da fonte do navegador. São úteis para elementos que não devem
mudar de tamanho, como bordas finas.
.borda-fixa {
border: 1px solid black;
}Esta borda tem exatamente 1px de espessura.
Estas unidades são calculadas com base em outro valor, tornando-as flexíveis.
É relativa ao tamanho da fonte do elemento raiz (<html>). Se o usuário aumentar o tamanho da
fonte no navegador, todos os elementos definidos com rem escalarão proporcionalmente. É a unidade
mais recomendada para fontes e espaçamentos, garantindo acessibilidade.
/* Se a fonte raiz for 16px (padrão): */
.titulo {
font-size: 2rem; /* 2 * 16px = 32px */
}
.texto {
font-size: 1rem; /* 1 * 16px = 16px */
}
.espacamento {
margin-top: 1.5rem; /* 1.5 * 16px = 24px */
}Parágrafo com 1rem.
É relativa ao mesmo valor no elemento pai. Se um elemento filho tem width: 50%, ele ocupará metade
da largura de seu elemento pai.
.container-pai {
width: 500px;
}
.filho-percentual {
width: 50%; /* 50% de 500px = 250px */
}São relativas ao tamanho da área de visualização do navegador (a janela).
vw (Viewport Width): 1vw é 1% da largura da janela.vh (Viewport Height): 1vh é 1% da altura da janela.São excelentes para criar seções que ocupam a tela inteira ou elementos que devem escalar diretamente com o tamanho da janela.
.secao-tela-cheia {
height: 100vh; /* Ocupa 100% da altura da janela */
}
.barra-responsiva {
width: 50vw; /* Ocupa 50% da largura da janela */
}A caixa abaixo tem width: 50vw. Redimensione a janela do navegador para vê-la mudar de tamanho.