How to determine the working width of layouts for responsive design?

Question

Design

I want to render a website for desktop, tablet and mobile. Everywhere it is recommended to take standard screen resolutions:
1. Mobile phones - 320px.
2. Tablets - 768px.
3. Desktop and tablets in landscape orientation - 1200px.
I understand that this is the minimum resolution of the workspace. Here you can see that the lower the resolution, the smaller the screen, and everything is quite logical. But as you know, now the resolution on mobile devices is quite large. For example, my phone width resolution is 1920, my tablet is 2560, and my laptop is 1920.
How to render the tablet and mobile version in this case? If I draw the mobile version of the site at 320 px, then it turns out that I will have huge columns on the side? But this is not so. In the mobile version, the site is not centered as in the desktop version. Or I don't understand something.

Answer 1

https://mydevice.io/devices/
There are physical sizes and css sizes are different things. This is an absolutely basic thing, without understanding which it is impossible to work as a web designer or layout designer.
The vast majority of Android phones have the same logical screen width - 360px. Although there is an HD screen, FullHD or even more. Width 320 used to be, and then for the most part among state employees, now it is almost gone.
Although it is 320 to draw the layout, there is still logic - it is guaranteed to fit everywhere.
iPhones up to five inclusive had a width of 320, from six and beyond - 375.
Phablets usually have a size of about 390-420.