When designing websites we often use media queries to make the website more responsive in different devices. However, I noticed that most media queries are defined with min-width, and min-width usually has small values like 768px, 920px, etc.
I just do not see how this makes the website mobile friendly because most phones have very high resolutions, take the iPhone X for example, the resolution is 2436 x 1125 pixels. Aren't the media queries useless then? The resolution for some phones is almost the same as, if not better than, some monitors, would this not mean that websites should look the same in some phones and monitors? What exactly am I missing?
Pixels here refer to CSS pixels rather than physical pixels. From MDN:
The CSS pixel—denoted in CSS with the suffix px—is a unit of length which roughly corresponds to the width or height of a single dot that can be comfortably seen by the human eye without strain, but is otherwise as small as possible.
When a website uses the <meta name='viewport' content='width=device-width'> declaration, the actual CSS pixels you get is a much smaller number than the declared resolution of the device.
For example, for my iPhone you'd get approximately 376px in width and 635px in height. The phone itself has a resolution three times larger, so you can say it has a device pixel ratio of 3.