Sei que o uso do REM nas medidas é porque ele escalona com o tamanho da fonte da página certo? mas como mais precisamente eu posso saber quando utilizar no meu projeto REM ou EM?
Sei que o uso do REM nas medidas é porque ele escalona com o tamanho da fonte da página certo? mas como mais precisamente eu posso saber quando utilizar no meu projeto REM ou EM?
Olá André! Tudo bem?
Você está certo sobre o uso do REM e EM em CSS. Ambos são unidades relativas, mas a diferença principal entre eles está em como eles são calculados.
REM (Root EM) é relativo ao tamanho da fonte do elemento raiz, geralmente <html>. Isso significa que se você definir o tamanho da fonte do <html> como 16px, 1rem será sempre igual a 16px, independentemente de onde você usar essa unidade no documento.
EM, por outro lado, é relativo ao tamanho da fonte do elemento pai. Isso pode levar a cálculos mais complexos, pois o valor de 1em pode variar dependendo da hierarquia de elementos.
Quando usar REM ou EM?
Use REM quando você quer que o tamanho seja consistente em toda a página, independentemente de onde o elemento está na hierarquia do DOM. Isso é útil para manter uma escala tipográfica consistente.
Use EM quando você quer que o tamanho seja relativo ao elemento pai, o que pode ser útil para criar componentes que se ajustam automaticamente ao contexto em que são usados.
Exemplo prático:
Se você tem um botão dentro de um card e quer que o tamanho do texto do botão seja relativo ao texto do card, EM pode ser a escolha certa. No entanto, se você quer que o tamanho do texto do botão seja consistente em toda a aplicação, REM seria mais apropriado.
Espero ter ajudado. Conte com nosso apoio!
Abraços e bons estudos!