Diferença entre porcentagem, rem e em?

Olá! Tudo bem? Essas três unidades são responsivas e recomendadas para serem utilizadas quando se quer mais facilidade na hora de construir layouts para todos os dispositivos. Quando se pensa num projeto responsivo, todas essas unidades podem ser usadas, dependendo de cada situação:

• porcentagem % : É uma unidade relativa ao elemento pai, e pode ter um comportamento diferente dependendo da propriedade:

  .elemento-pai {
    width: 200px;
    font-size: 16px;
  }
  .elemento-filho {
    /* 50% de 200px = 100px  */
    width: 50%;
  
    /* 200% de 16px = 32px  */
    font-size: 200%;
  }

  Quando usamos porcentagem no width, estamos calculando com base na largura do elemento pai, o mesmo acontece com a propriedade font-size. A porcentagem deve ser usada principalmente quando queremos definir a largura ou altura de um elemento com relação ao seu elemento pai. Quando queremos definir altura e largura com base na tela, devemos usar vw (% da largura da tela) e vh (% da altura da tela).

• rem : Unidade relativa ao valor da fonte no elemento raiz (aquele pseudo-elemento :root ou através da tag html), esse valor varia de acordo com o dispositivo e pode ser alterado, normalmente ele vale 16px

:root {
    /* Definindo a fonte raiz como 32px, o padrão normalmente é 16px */
    font-size: 32px;
}
/* Podemos usar :root ou html */ 
/*html {
    font-size: 32px;
}*/
.texto {
    /* O font-size será 2 vezes o font-size da raiz, logo vai valer 64px */
    font-size: 2rem;
}

A unidade rem normalmente é utilizada para valores de fonte e também pode ser usada para marcar espaçamentos, como ela é relativa à raiz, fica mais fácil de prever qual será o seu valor.

• em : Valor referente ao font-size do seu elemento pai, esse valor pode acabar se acumulando e ficando mais difícil de se entender quando se tem uma estrutura html mais complexa, por isso deve ser usado com mais cuidado.

<ul class="lista-com-ems">
  <li>30px (20px * 1.5)</li>
  <li>30px (20px * 1.5)
    <ul>
      <li>45px (30px * 1.5)</li>
      <li>45px (30px * 1.5)
        <ul>
          <li>67.5px (45px * 1.5)</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

html {
    font-size: 20px;
}
.lista-com-ems li {
    font-size: 1.5em;
}

Exemplos como o de acima não são muito comuns, mas usar em pode acabar sendo mais complicado do que rem, mas no geral em é uma ótima unidade para definir espaçamentos, já que são relativas ao elemento pai, então o elemento com em consegue se adequar mais facilmente ao seu tamanho. Essa unidade também é normalmente usada para definir tamanhos de fontes. Espero ter ajudado!