I'm a bit confused about how device screen emulation works in chrome and how to use it to write affordable media-query. e.g.
IPhone X
Real device screen-size: 1125x2436px
Emulated device screen-size: 375x812px
I know that a resolution like that easily take two full-hd screen to be shown at 1:1 scale with the actual monitor resolution (pixel density), but the emulated res is not simply the result of a zoom-out, because if I zoom in or out the view, pixel size is about the same, and this make me think that chrome is suggesting me that the emulated resolution should be my reference for layout, like it is the real-device res.
But if it is, how this resolution is calculated? Why I should use this instead of the actual device screen-size?
While phone screens are usually high resolution like Full HD or Quad HD, their browser viewports are not, instead they are the resolutions Chrome shows you in the developer tools.
This helps you when setting up your CSS media-queries as you don't have to handle every single resolution of every specific device.
But if it is, how this resolution is calculated?
It is just a scaled down version of the actual screen resolution for that given device.
Why I should use this instead of the actual device screen-size?
Because the actual resolution of the viewport is that one and not the device screen size.
You can read more about this here: https://mediag.com/blog/popular-screen-resolutions-designing-for-all/