How (and should one) take into account the technical characteristics of phone screens in mobile layout?

Question

css

Good afternoon. I just can’t get my head around some of the principles of adaptive layout. For example, some parameters are set in the media query from 320px:

@media (min-width: 320px) {
    h1 {
        font-size: 1rem;
    }
}

If you look in the browser, in the developer tools, then with the specified physical width, everything looks ok. If you set the width in the browser to 750px (which is also a phone - for example, the sixth iPhone - 750x1334), then, of course, everything is damn small. But the physical width in reality is not equal to 750 - it still remains 320 or 360, do I understand correctly?
In other words, there is no point in increasing the font on several transition points from 320 to 768, for example? The phone itself will figure out how to render the whole thing? Subject to the prescribed viewport.
And the second part of the question - how is all this disgrace (for example, 1rem font) displayed on retina screens? Is it really like 2rem, since retina doubles the pixel density?

Answer 1

Switch to bootstrap viewports and be happy. Vot

Answer 2

There is a difference between screen size and viewport size.
View, for example, here viewportsizes.com
For your device https://www.esolutions.se/en-GB/test
No, like 1rem
In my opinion, this is not "a few points", but "more than 2 times more".
Specify what you wanted to ask.