title: How to scale thumbnails based on the device resolution?
body: <p>I have these media query rules that specify how many thumbnails should fit inside a row, depending on the window width:</p>
  
  <pre><code>@media only screen and (min-width: 250px){ 
    li{
      max-width: 100%;
    }
  }
  
  @media only screen and (min-width: 700px){ 
    li{
      max-width: 50%;
    }
  }
  
  @media only screen and (min-width: 950px){ 
    li{
      max-width: 33.3333333333%;
    }
  }
  
  @media only screen and (min-width: 1200px){ 
    li{
      max-width: 25%;
    }
  }
  
  @media only screen and (min-width: 1600px){ 
    li{
      max-width: 20%;
    }
  }
  </code></pre>
  
  <p>It works fine on a display with a 1.0 pixel ratio, but on high-dpi displays the thumbnails appear too large.</p>
  
  <p>After some googling I found out that I should add another set of rules for higher dpi displays that include <code>(and min-resolution: 1.3dppx)</code></p>
  
  <p>But that doesn't really fix the problem for any display, it just fixes it for a display with a 1.3 dpi.</p>
  
  <p>Is there any way to adjust the min-width values in the first set of rules in such a way that it takes into account the device pixel ratio?</p>
  
  <p>I'm looking for something like:</p>
  
  <pre><code>...and (min-width: (250px * resolution))
  </code></pre>
  
  <p>but that obviously doesn't work :/</p>