1
Reading some CSS articles on responsive layout I managed to understand some new "concepts", but some applications were still a bit confusing for me, which is the case of the use of em (or rem) to create layouts more dynamic and responsive.
I do not intend to go into comparative details, such as what px and its difference between %, em or rem, but rather the application of these generally. I also do not intend to go into such a great level of detail in the case of em or rem, because despite having some differences, these are very small details that can make the discussion very complex.
Going to the question itself now, I was able to understand the concept well when applied to the sources. By default the browser sets the initial source to 16px, so I should use variations on rem, this way the source adjusts properly independent of resolution, pixel density, etc...
But what about other elements or properties? For example, say I have defined p as follows:
p {
font-size: 1rem;
margin: 0 0 24px;
}
Or would it be better to define according to the same logic? For example:
p {
font-size: 1rem;
margin: 0 0 1.5rem;
padding: 0 0.5rem;
etc...
}
As for the configuration of other elements such as those that create the column system, I know that the use of %, but I also noticed a very constant use of em in @media() for the definition of break-points.
How ideal this approach would be, using em (or rem) instead of px? Or what considerations I should take into account in this decision making, aiming at the creation of layouts dynamic and responsive.
See if it helps: em and rem use html or body tags as a reference?
– Bacco
There’s this one too: Why it is recommended to use the "em" unit instead of "px" for fonts?
– Bacco
@Bacco These links have good content, but as I commented on the question, I do not intend to address the technical differences between the units. For example, the first link explains how the em/rem generate the values and the second is more specific to the use with sources. My biggest doubt is when we expand its use. As for example, within media, position, padding, margin, width, etc.. With a focus on responsiveness.
– celsomtrindade
PS: In the end I thought it best to highlight a few points in this answer, even to keep it more up to date: http://answall.com/questions/14217/70 - in which way, if it’s not what you’re looking for, let’s see if someone adds something cool to this one that justifies two questions on the subject, with the approach you seek. Right away, I can’t think of much else to talk about without being repetitive, but suddenly other users have points that were not considered in the other issues, and that would not fit in those posts.
– Bacco