Boa noite,
Pra mim não ficou muito claro quando usar px, %, em ou rem, exister alguma pattern ou boas práticas de como devo utiliza-las?
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
Boa noite,
Pra mim não ficou muito claro quando usar px, %, em ou rem, exister alguma pattern ou boas práticas de como devo utiliza-las?
Depende muito do cenário e do comportamento de cada elemento. Alguns exemplos:
Voce tem um logotipo pequeno no topo do site que nao deve mudar de tamanho conforme as resolucoes mudam. Use px pra deixa-lo fixo.
Voce tem um layout que divide a tela em 2 colunas em todas as resolucoes. A ideia é que sempre divida no meio independente da resolucao. Precisa ser flexivel. Logo, use % com width:50%.
Voce tem paragrafos de texto e quer colocar a margem entre os paragrafos. Mas a fonte dos textos pode mudar em algumas situacoes, e vc nao quer ficar mudando a margem tbm toda hora. Entao use em para que a medida da margem esteja relacionada ao font-size do paragrafo: margin:1em.
O rem tem a mesma propriedade de ser uma medida tipografica, mas ele nao responde ao tamanho do elemento ou do seu pai. Responde apenas ao font-size do <html>. Entao use se vc quiser mudar o font-size do <html> e quiser que essa mudanca afete varios elementos na tela (é comum em design responsivo por exemplo)