Eu não entendi muito bem pra que serve as medidas em ou rem!!
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Eu não entendi muito bem pra que serve as medidas em ou rem!!
Olá Mauro,
Porcentagem (%) e em :
A unidade em funciona da mesma maneira que a porcentagem. Ambas tem a função de deixar o site mais "flexivel", deixando ele responsivo e capaz de se adequar a diferentes resoluções.
Você pode usar essas unidades tanto para tamanho de DIVs quanto para tamanho da fonte dos seus textos:
Exemplo %:
h1 {
font: 125% arial, sans-serif;
}Nesse exemplo o tamanho da fonte do h1 é 125% o tamanho da fonte definida pelo navegador (geralmente 16px) ou 125% o tamanho de fonte definido pela TAG pai (TAG body, por exemplo).
Vamos ter o mesmo resultado usando o valor 1.25em. Veja:
h1 {
font: 1.25em arial, sans-serif;
}Sendo assim, concluimos que:
100% = 1em = tamanho definido
e
125% = 1.25em = 1.25*tamanho definidoUnidade rem :
Seguinte a mesma ideia, o rem se baseia no tamanho definido na raiz (rem = root em). A raiz geralmente é a TAG html. Exemplo:
html {
font-size: 14px; //Tamanho da fonte na raiz
}
div {
font-size: 1.2rem; //Aqui o valor é 16.8px, pois 14*1.2 = 16.8
}
A medida de fonte, por padrão é medida em Pixel, porem ao setar uma fonte em pixel, estamos definindo que aquela fonte tem tamanho estático! Para corrigir isso utilizamos o padrão EM e REM.
Qual o problema em ter tamanho fixos? Por exemplo quando damos zoom na página, o que estiver configurado com pixels não muda.
A diferença entre EM e REM é simples de se entender e complexo de se aplicar.
REM - é calculado em cima do valor da TAG Body, Html ou Navegador.
EM - já utiliza no cálculo o valor do elemento pai, criando uma hierarquia no cálculo, tornando mais complexo o uso.