What is the "resolution" of the screen and how is it all calculated?

Question

Monitors

Hello!
Please explain, here I have a 27-inch screen with FullHD resolution and the same 27-inch screen with UltraHD resolution. The number of pixels in the second is about twice as large as in the first. And there is also a phone that is also FullHD, but 7 inches. That is, they differ in pixel density.
The question is this: when I draw a button on a site with 120x80 pixels, it should be half as large on UltraHD as on FullHD, but it is the same. Why? Or I write a media query "@media(max-width:600px)" and it works on the phone, although there are 1080 pixels.
How are pixels measured in html and how to recalculate them into real pixels on the screen?

Answer 1

1. There are 4 times more pixels on uhd than on fhd.
2. The size of the screen does not matter, only the resolution is grand.
3. uhd (and above) usually work in hidpi mode.
it is because of hidpi that any 4k monitor produces a viewport of the same size as a regular fhd. so the button looks the same.
Now, if you turn off hidpi, and use the full resolution of the monitor, then the button, of course, will be smaller.