title: Specifying multiple -webkit-min-device-pixel-ratio and -webkit-max-device-pixel-ratio css media queries
body: <p>Need ability to specify different css for different device-pixel-ratio values. How can this be done</p>
  
  <p>For example,</p>
  
  <blockquote>
  <pre><code>0 &lt;= range 1 &lt;= 1
  1 &lt;  range 2 &lt;= 1.5
  1.5 &lt;  range 3 &lt;= 2.0
  2.0 &lt; range 4
  </code></pre>
  </blockquote>
  
  <p>Example media query looks like</p>
  
  <blockquote>
  <pre><code>&gt;     @media (-webkit-max-device-pixel-ratio:1.0) {
  &gt;         .fontCls {
  &gt;             color: #FF00FF; // pink
  &gt;             font-size: 20px;
  &gt;             text-decoration: overline;
  &gt;         }
  &gt;     }
  &gt;     
  &gt;     @media (-webkit-min-device-pixel-ratio:1.0) and (-webkit-max-device-pixel-ratio:1.4) {
  &gt;         .fontCls {
  &gt;             color: #FF00FF; // pink
  &gt;             font-size: 16px;
  &gt;             text-decoration: line-through;
  &gt;         }
  &gt;     }
  &gt;     
  &gt;     @media (-webkit-min-device-pixel-ratio:1.5) and (-webkit-max-device-pixel-ratio:1.9) {
  &gt;         .fontCls {
  &gt;             color: #FF00FF; // pink
  &gt;             font-size: 16px;
  &gt;             text-decoration: underline;
  &gt;         }
  &gt;     }
  &gt;     
  &gt;     @media (-webkit-min-device-pixel-ratio:2.0) {
  &gt;         .fontCls {
  &gt;            color: #FF00FF; // pink
  &gt;             font-size: 16px;
  &gt;             font-weight: bold;
  &gt;         }
  &gt;     }
  </code></pre>
  </blockquote>