Change layout based on screen size

Question

I would like the content of my website header to occupy 100% of the screen width on regular-sized desktops/laptops, but to be centered on larger displays. By "larger displays", I'm referring to the actual size of the display too, not just the resolution. On my 15" laptop and my 23" desktop (both having the same resolution of 1920x1080), I would like the displays to be different. Having such a wide menu on a 23" display doesn't look good as there are wide empty parts.

I'm currently using a .container BootStrap class for the contents of the header, and I overrided a media query so that the container has a width of 100% when the screen width exceeds 1200px. Again, this isn't really what I want :

• If the screen width exceeds 1200px, the header width should be 100%
• If the screen width exceeds 1920px, the header width should be the default one, and the header should be centered
• If the screen width exceeds 1200px, and the screen itself is large (anything above 19"), the header width should be the default one, and the header should be centered.

I'm not sure if that's the best approach, but I'm open to all suggestions.

Thanks

Answer 1

My solution was to use media queries based on pixel density

This allowed to write something like

@media screen and (max-resolution: 116dpi){

116dpi is the DPI of a 19" screen with a resolution of 1920x1080. If the screen gets larger, say 23" with the same resolution, pixel density gets lower, then we have something below 116dpi.