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.

Answer 2

Try out setting media screen and limitation through min-width. http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

@media screen and (min-width: 1200px) {
      .container {
          width: 100%;
      }
  }

@media screen and (min-width: 1920px) {
      .container {
          width: 500px;
      }
  }