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\"

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.