Lendo alguns artigos de CSS sobre layout responsivo consegui entender alguns novos "conceitos", porém algumas aplicações ainda ficaram meio confusas para mim, o que é o caso do uso de em
(ou rem
) para criação de layouts mais dinâmicos e responsivos.
Não pretendo entrar em detalhes comparativos, como por exemplo, o que é o px
e sua diferença entre %
, em
ou rem
, mas sim a aplicação destes de modo geral. Também não pretendo entrar em um nível de detalhamento tão grande no caso de em
ou rem
, pois apesar de terem algumas diferenças, são detalhes muito pequenos que podem deixar a discussão muito complexa.
Indo para a questão propriamente dita agora, eu consegui compreender bem o conceito quando aplicado às fontes. Por padrão o navegador define a fonte inicial como 16px
, então eu deveria usar variações em rem
, deste modo a fonte se ajusta adequadamente independente da resolução, densidade de pixels, etc...
Mas e quanto a outros elementos ou propriedades? Por exemplo, digamos eu tenha definido p
da seguinte forma:
p {
font-size: 1rem;
margin: 0 0 24px;
}
Ou seria melhor eu definir de acordo com a mesma lógica? Por exemplo:
p {
font-size: 1rem;
margin: 0 0 1.5rem;
padding: 0 0.5rem;
etc...
}
Quanto a configuração de outros elementos como os que criam o sistema de colunas, sei que ainda seria mais adequado o uso de %
, mas também notei um uso bem constante de em
em @media()
para definição de break-points.
Até que ponto seria ideal essa abordagem, utilizando em
(ou rem
) ao invés de px
? Ou quais considerações eu devo levar em conta nessa tomada de decisão, tendo como objetivo a criação de layouts dinâmicos e responsivos.