1

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.

4
  • Veja se ajuda: O em e o rem usam as tags html ou body como referência?
    – Largato
    28/10/2016 às 23:56
  • @Bacco Esses links tem bons conteúdos, mas é como eu comentei na questão, eu não pretendo tratar as diferenças técnicas entre as unidades. Por exemplo, o primeiro link explica como o em/rem geram os valores e o segundo fica mais específico ao uso com fontes. Minha maior dúvida é quando expandimos o seu uso. Como por exemplo, dentro de media, position, padding, margin, width, etc.. Com foco em responsividade. 29/10/2016 às 0:37
  • PS: No fim achei melhor evidenciar alguns pontos nesta resposta, até pra deixar ela mais em dia: pt.stackoverflow.com/questions/14217/70 - de qq forma, se não é o que busca, vamos ver se alguém acrescenta algo legal nesta aqui que justifique duas perguntas sobre o tema, com a abordagem que você procura. De imediato, não consigo pensar muito mais o que falar nisso sem ser repetitivo, mas de repente outros usuários tem pontos que não foram considerados nas outras questões, e que não caberiam naquelas postagens.
    – Largato
    29/10/2016 às 12:15

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .