How to correctly use rem in adaptive layout?

Question

css

I'm kind of a novice coder, and I have some problems understanding the world.
My guess is that screen sizes, pixel density and visual acuity are quite different for all users, and everyone adjusts the default font size to the optimal one for a combination of all these factors. Especially on mobile.
And, since readability is more important for text than a beautiful arrangement, all "typographical sizes" should be given in rem. At the same time, the typographic sizes, in theory, also include the margins of all text elements and the paddings of their containers, as well as sometimes the width of the containers (to approximately fall into the number of letters), and probably something else.
As a result, a bunch of crap is formed when combining graphic sizes in pixels and typographic ones in unpredictable rem. And this is in addition to the "composite" size in percent. Especially if the designer managed to find that the base font is not 16px, but some 14.25px ± 50%. How do you work with this?
The question is how this trouble is correct and justified.
1. Do users really adjust the font size?
2. What exactly should be referred to as "typographic sizes" that should be in em/rem?
PS
Material-components-web uses rem, and some em/rem indentation.
And angular/material are used everywhere px.
Both from a calculation like 1rem = 16sp = 16px.

Answer 1

If we talk about mobile, then if the screen resolution is Full HD, then this does not mean that the content on it will be displayed in the same way as on the desktop with the same resolution. That's what the viewport meta tag is for. By reducing the font size for mobile, you reduce it not relative to 1920, but relative to 320px at the minimum for mobile. This I mean that you can just use pixels for the font and it will look fine. Just adjust in media queries and that's it

Answer 2

html {
  font-size: 1px;
}

body {
  font-size: 16rem;
}

p {
  font-size: 17rem;
}

@media screen and (max-width: 600px) {
  html {
   font-size: 1.2px;
  }
}

Answer 3

The point is that all typography sizes, heading sizes and their indents, paragraph indents and line height are set relative to the base font for example 16px. And if you need to change all the typography for a specific device, then only one value changes in the media query - the base font, the rest changes proportionally.
https://betterwebtype.com/rhythm-in-web-typography
https://www.youtube.com/watch?v=b9M_7ytm-iM

Answer 4

https://habr.com/post/280125/

Answer 5

the base font is not 16px, but some 14.25px ± 50%

For this, it is necessary to correct the position for "disagnira". Fractional pixels are displayed by all browsers as they want: someone will round to integers, someone to hundredths, like yours, and someone honestly renders even 14.674956954px. Add sub-pixel anti-aliasing and get a lot of questions "why is your font so soapy?".
Right now, users can only zoom the entire page. They do not particularly use it, only if there is a problem with vision (for the user or the creators of the site).
What you definitely shouldn't do is mix pixels and typographic points. Either {font-size: 1em, line-height: 1.25em} or {font-size: 16px, line-height: 20px}. We have now decided to use pixels so as not to think about what 1.4 points will be equal to, especially if someone wants to change the font size. Although I personally find it acceptable to sometimes use em to indicate indentation in pixel layouts , for example, in :first-letter.

Answer 6

*, *:before, *:after {
  box-sizing: inherit;
}

html {
  font-size: 62.5%; /* 10px */
}

body {
  font-size: 200%; /* 20px */
}

So let's go: now we have 2 types of relative units REM (10px) and EM (20px). REM - will be fixed throughout the document. EM - can be overridden for a specific block. After the entire layout is laid out using relative units, it will be quite simple to adapt it to other resolutions:

@media all and (min-width: 1200px) {
  html {font-size: 39.0625%} /* 1200/1920 * 62.5 */
}

@media all and (min-width: 1440px) {
  html {font-size: 46.875%}
}

@media all and (min-width: 1600px) {
  html {font-size: 52.0833333333%}
}

@media all and (min-width: 1920px) {
  html {font-size: 62.5%}
}

It remains only to redefine the necessary layout blocks for resolution