Skip to content

Instantly share code, notes, and snippets.

@chocopie

chocopie/high-dpi-media.css

Forked from marcedwards/high-dpi-media.css
Created January 10, 2013 05:17
Show Gist options
  • Save chocopie/4499648 to your computer and use it in GitHub Desktop.
Save chocopie/4499648 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @marcedwards marcedwards revised this gist Nov 19, 2012. 1 changed file with 1 addition and 2 deletions.
    3 changes: 1 addition & 2 deletions high-dpi-media.css
    View file
    Original file line number Diff line number Diff line change
    @@ -19,8 +19,7 @@
    /* */
    /* ---------------------------------------------------------- */

    @media only screen and (min-device-pixel-ratio: 1.3),
    only screen and (-webkit-min-device-pixel-ratio: 1.3),
    @media only screen and (-webkit-min-device-pixel-ratio: 1.3),
    only screen and (-o-min-device-pixel-ratio: 13/10),
    only screen and (min-resolution: 120dpi)
    {
  2. @marcedwards marcedwards revised this gist Aug 30, 2012. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions high-dpi-media.css
    View file
    Original file line number Diff line number Diff line change
    @@ -19,9 +19,9 @@
    /* */
    /* ---------------------------------------------------------- */

    @media only screen and (-o-min-device-pixel-ratio: 13/10),
    @media only screen and (min-device-pixel-ratio: 1.3),
    only screen and (-webkit-min-device-pixel-ratio: 1.3),
    only screen and (min-device-pixel-ratio: 1.3),
    only screen and (-o-min-device-pixel-ratio: 13/10),
    only screen and (min-resolution: 120dpi)
    {
    /* Your code to swap higher DPI images */
  3. @marcedwards marcedwards revised this gist Aug 30, 2012. 1 changed file with 22 additions and 20 deletions.
    42 changes: 22 additions & 20 deletions high-dpi-media.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,24 +1,26 @@
    /* -------------------------------------------------------- */
    /* */
    /* A media query that captures: */
    /* */
    /* - Retina iOS devices */
    /* - Retina Macs running Safari */
    /* - High DPI Windows PCs running IE 8 and above */
    /* - Low DPI Windows PCs with IE zoomed in */
    /* - Android hdpi devices and above */
    /* - Android tvdpi devices, including Google Nexus 7 */
    /* - Chrome running on high DPI Macs and PCs */
    /* */
    /* Please note that that this code assumes you'll swap a */
    /* 2× version of your images. If you'd like to supply */
    /* finer increments, other thresholds might be appropriate. */
    /* */
    /* @marcedwards from @bjango */
    /* */
    /* -------------------------------------------------------- */
    /* ---------------------------------------------------------- */
    /* */
    /* A media query that captures: */
    /* */
    /* - Retina iOS devices */
    /* - Retina Macs running Safari */
    /* - High DPI Windows PCs running IE 8 and above */
    /* - Low DPI Windows PCs with IE zoomed in */
    /* - Android hdpi devices and above */
    /* - Android tvdpi devices, including Google Nexus 7 */
    /* - Chrome running on high DPI Macs and PCs */
    /* - Opera running on high DPI Macs, PCs and mobile devices */
    /* */
    /* Please note that that this code assumes you'll swap a */
    /* 2× version of your images. If you'd like to supply */
    /* finer increments, other thresholds might be appropriate. */
    /* */
    /* @marcedwards from @bjango */
    /* */
    /* ---------------------------------------------------------- */

    @media only screen and (-webkit-min-device-pixel-ratio: 1.3),
    @media only screen and (-o-min-device-pixel-ratio: 13/10),
    only screen and (-webkit-min-device-pixel-ratio: 1.3),
    only screen and (min-device-pixel-ratio: 1.3),
    only screen and (min-resolution: 120dpi)
    {
  4. @marcedwards marcedwards revised this gist Aug 30, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion high-dpi-media.css
    View file
    Original file line number Diff line number Diff line change
    @@ -20,7 +20,7 @@

    @media only screen and (-webkit-min-device-pixel-ratio: 1.3),
    only screen and (min-device-pixel-ratio: 1.3),
    only screen and (min-resolution: 120dpi),
    only screen and (min-resolution: 120dpi)
    {
    /* Your code to swap higher DPI images */
    }
  5. @marcedwards marcedwards revised this gist Aug 25, 2012. 1 changed file with 2 additions and 3 deletions.
    5 changes: 2 additions & 3 deletions high-dpi-media.css
    View file
    Original file line number Diff line number Diff line change
    @@ -18,10 +18,9 @@
    /* */
    /* -------------------------------------------------------- */

    @media
    only screen and (-webkit-min-device-pixel-ratio: 1.3),
    @media only screen and (-webkit-min-device-pixel-ratio: 1.3),
    only screen and (min-device-pixel-ratio: 1.3),
    only screen and (min-resolution: 120dpi),
    {
    /* Your code to swap higher DPI images */
    }
    }
  6. @marcedwards marcedwards revised this gist Aug 25, 2012. 1 changed file with 1 addition and 2 deletions.
    3 changes: 1 addition & 2 deletions high-dpi-media.css
    View file
    Original file line number Diff line number Diff line change
    @@ -24,5 +24,4 @@
    only screen and (min-resolution: 120dpi),
    {
    /* Your code to swap higher DPI images */
    }
    }
    }
  7. @marcedwards marcedwards revised this gist Aug 24, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion high-dpi-media.css
    View file
    Original file line number Diff line number Diff line change
    @@ -12,7 +12,7 @@
    /* */
    /* Please note that that this code assumes you'll swap a */
    /* 2× version of your images. If you'd like to supply */
    /* finer increments, other thresholds might be appropriate */
    /* finer increments, other thresholds might be appropriate. */
    /* */
    /* @marcedwards from @bjango */
    /* */
  8. @marcedwards marcedwards revised this gist Aug 24, 2012. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions high-dpi-media.css
    View file
    Original file line number Diff line number Diff line change
    @@ -5,6 +5,7 @@
    /* - Retina iOS devices */
    /* - Retina Macs running Safari */
    /* - High DPI Windows PCs running IE 8 and above */
    /* - Low DPI Windows PCs with IE zoomed in */
    /* - Android hdpi devices and above */
    /* - Android tvdpi devices, including Google Nexus 7 */
    /* - Chrome running on high DPI Macs and PCs */
  9. @marcedwards marcedwards created this gist Aug 24, 2012.
    27 changes: 27 additions & 0 deletions high-dpi-media.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,27 @@
    /* -------------------------------------------------------- */
    /* */
    /* A media query that captures: */
    /* */
    /* - Retina iOS devices */
    /* - Retina Macs running Safari */
    /* - High DPI Windows PCs running IE 8 and above */
    /* - Android hdpi devices and above */
    /* - Android tvdpi devices, including Google Nexus 7 */
    /* - Chrome running on high DPI Macs and PCs */
    /* */
    /* Please note that that this code assumes you'll swap a */
    /* 2× version of your images. If you'd like to supply */
    /* finer increments, other thresholds might be appropriate */
    /* */
    /* @marcedwards from @bjango */
    /* */
    /* -------------------------------------------------------- */

    @media
    only screen and (-webkit-min-device-pixel-ratio: 1.3),
    only screen and (min-device-pixel-ratio: 1.3),
    only screen and (min-resolution: 120dpi),
    {
    /* Your code to swap higher DPI images */
    }
    }