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 definido

Unidade 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.