CSS em rem % questions about relative units - which is better...and how?

Question

css

I'm trying to figure out the basics of responsive web design. Questions on relative units. Please do not send to Google - I re-read it in two days - please explain in more detail...
1) What is the difference between percentages and em in setting the font size? If they are the same, then why em and not percentages?
2) em write that it is cascaded (in tables according to the principle of geometric progression) and is taken from the parent. Do percentages behave the same way?
3) why not use rem, because it repels only one html{font-size} size?
4) why do they write body{font-size:100%} if the body will inherit the default browser settings (for a normal font 16 px for example)?
5) in some articles they write that in ems you can set indents (margins, paddings and borders), but this topic is poorly disclosed. How, then, to calculate them when laying out the layout?
6) Many write that modern browsers perfectly scale pixels. Are relative units not needed in the modern responsiveness? Is it so? where is the truth?
7) when changing the settings in Windows to large, how will the fonts and indents in em, rem and % behave?
8) Any other advice on using relative sizes is welcome...

Answer 1

Ankhena W has described everything in sufficient detail, but something should be clarified.
1. Percentages and em are still different units of measurement. For some properties they behave the same (in particular font-size), for some they behave differently. For example, when setting line-height, the percentage is calculated from the current element's font size, and em from the parent's font size.
2. The same. Depends on the property to which it is applied.
3. You can use (and use), but it is not always necessary. Let's say the small element should always be 25% smaller wherever it is. Rather than write rules for all cases of its appearance in the layout, it's easier to write one rule - font-size: 0.75em;
4. The inaccuracy of the author. body inherits not the browser settings, but the properties of the root html element, which is precisely set by the browser settings (by default).
5. Indentation in em is convenient to set when describing typography, but not blocks. For example, for headings, paragraphs, etc. In general, if you describe all typography in relative units, it is easy, literally in a couple of rules, to adapt it to different screens.
And for everything else: there is no truth . Unexpected, right? However, this seems to be true. It all depends on the specific circumstances. Somewhere it is more convenient to use one, somewhere else. And it's great that CSS gives us this opportunity.

Answer 2

1. For the font: nothing. It's just that someone loves %%, and someone likes decimal fractions.
For other properties: see Sergey
's answer 2. No difference.
If it is written td {font-size: 0.5em}, and the tables are nested, then each next one will take half the font size of its parent, which means that it will be halved at each next step. Same with %%.
3. Everyone chooses how it is more convenient for him to count. Both options are converted from one to the other.
4. My familiar programmer in such cases answered "for reliability". It's too much.
5. This is more of a question for typographic designers. What are the correct beautiful indents for the text and its environment.
The size in em is set to maintain proportions when changing the font.
6. The truth is in the layout of the designer :)
There are different solutions for different purposes.
7. See sites on different devices. Imagine yourself young and frisky or a blind old woman. Is everyone comfortable? Fine.

Answer 3

3) Because it is almost never needed by anyone. There is also a need to support changing the base font size in the user's browser - if he sets it to 150% in the settings, so that all fonts are based on this size. But then again, this is not a very often used feature, and besides, it is likely that the layout will work. Now everyone uses the usual scaling, which is not hidden deep in the browser settings, and scaling does not depend on rem units and usually does not break the layout.
4) As far as I know, this was written because of a bug in IE6/7. Right now it makes no sense.
5) All the difference between padding and size in px versus em is only that the latter depend on the size of the text. This is a handy technique for scaling elements, just increase the text size and the padding will increase in proportion to the text. However, you need to understand where it is better to use em, where rem, and where just px. Here is a good article on this topic https://zellwk.com/blog/rem-vs-em/
6) Relative units are needed, but this is not a panacea. The px itself is a relative unit in essence, since they are CSS pixels, depend on screen density, and are not equal to physical pixels on the screen. Percentages exist for fluid layout (grids with columns of 25% of the parent width, for example), viewport units (vh, vw, vmin, vmax) are needed when you need to focus on screen sizes (full screen site, fluid font sizes, etc. ), rem and em for text size. If none of these dependencies are needed, just use pixels.

Answer 4

You forgot about vh, vw and rem. which have been gaining popularity in recent years.

Answer 5

most often css pixels
sometimes %
och rarely em