Search code examples
htmlcssmedia-queries

What is the CSS @media query for 28" display?

I'm searching for what's the code for a display 28", by code I mean the CSS media query, like this in the example.

Example: 

@media (max-height: 1200px) and (min-width: 1920px) {

.nav-over {
    width: auto;
    float:right;
    margin-right: 420px;
  }

  .nav {
    list-style: outside none none;
    margin-bottom: 0;
    padding: 0px;
    margin-top: 0px;
    margin-right:400px;
  }

  .navbar-brand {
    margin-left: 250px;
  }
}

Thanks for the help.

Solution

  • That is super specific and I would not recommend doing it, but the way to do it is this

    If you calculate the DPI (dots per inch) you can use this link to get the DPI

    For 28″ you get 1920 x 1080 measures at 78.68 DPI and 1200x960 is 54.88 DPI

    So for 1200px you get something like:

    @media screen 
    and (min-device-width: 1200px) 
    and (min-resolution: 53dpi)
    and (max-resolution: 60dpi) { 
}