Unidades de medida - Pixels versus Em - Qual o melhor, ou o que utilizar?

Olá Marcos,

Pixel é uma unidade exata enquanto EM e REM são unidades relativas, cada uma tem uma vantagem, mas sempre haverá casos em que você terá que realizar ajustes para cada resolução, no mesmo modo que faria com Pixels.

EM: É o tamanho relativo a fonte do elemento pai, exemplo:

<div style="font-size:16px;">
  pai  
  <div style="font-size:2em;">
    filho
  </div>
</div>

A fonte do filho será 2 vezes a fonte do pai.

REM: É parecido com o EM mas ele é relativo ao tamanho da fonte do elemento raiz.

Marcos,

Para mais detalhes você pode acessar o seguinte link:

https://tableless.com.br/unidade-pixels-em-rem/#:~:text=Unidade%20em%20pixels%20%C3%A9%20mais,da%20borda%20e%20outras%20coisas.&text=Antigamente%20definir%20unidades%20de%20texto,por%20causa%20do%20Internet%20Explorer.

Ei Marcos, beleza?!

Cara, é difícil falar o que é melhor sem saber exatamente o que você quer fazer, tudo vai depender da sua necessidade no momento. Eu particularmente, evito usar o pixel porque acaba ficando mais trabalhoso na hora de mexer com design responsivo, além de ter alguns problemas relacionados a acessibilidade. A unidade EM é muito boa para se usar, desde que você saiba usá-la bem, uma vez que é muito fácil as coisas saírem do controle quando utilizada. Isso acontece porque ela é uma unidade que pode mudar, por exemplo, de acordo com o 'font-size' de um elemento pai, e isso vai se tornando um efeito cascata quando você começa a aninhar as tags e trabalhar com tamanhos de fontes diferentes. Como você está começando agora, aconselho que trabalhe com a unidade REM, pois ela não sofre com esse efeito cascata por estar atrelada ao root, ou seja, ao tamanho de fonte padrão do navegador (geralmente, 16px). Após se acostumar mais com o REM, comece a estudar mais sobre como utilizar o REM e o EM em conjunto, pois isso irá te ajudar muito a fazer menos modificações quando trabalhar com responsividade. Tentei ser o mais claro possível e espero ter ajudado.

Um abraço!

Valeu pessoal. Acho que entendi. :)

Bem complicadinho, esse assunto, não? Quer dizer, pelo menos para quem está começando. Mas vamos que vamos.

Muito obrigado!

Outra dúvida: e no caso de não existir essa tag font-size:16px , da div? Acho que estou fazendo confusão. Deu um "nó" na cabeça...rs :(

Marcos,

O font-size default já é 16px, o style inserido na div foi apenas para exemplificar.

Caso não tenha mais nenhuma dúvida, por favor marque esse post como solução e encerre o tópico.

Entendi, Guilherme. Obrigado.