Imagine having two monitors: one 15.5 inches with a resolution of 1920 x 1080 and the other 24 inches with the same resolution. The first monitor has a pixel density of around 72 PPI, while the second has around 90 PPI. If I apply a media query in CSS for a resolution of 1920 x 1080 and set the font size to 50 pixels, it will look great on the first monitor but too small on the second monitor. This issue extends beyond just font sizes to other elements as well. As someone new to frontend development, I'm struggling with this aspect of responsive design.
How can I effectively size elements across monitors of differing sizes but with the same resolution?