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?
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)