Skip to content

Instantly share code, notes, and snippets.

@justo

justo/mqs.css

Last active December 19, 2015 21:59
Download ZIP

Revisions

  1. justo revised this gist Sep 6, 2013. 1 changed file with 5 additions and 5 deletions.
    10 changes: 5 additions & 5 deletions mqs.css
    View file
    Original file line number Diff line number Diff line change
    @@ -31,18 +31,18 @@
    }

    /* Common screen size aspect ratio queries */
    @media screen and (min-aspect-ratio: 5/4) {
    @media only screen and (min-aspect-ratio: 5/4) {

    }
    @media screen and (min-aspect-ratio: 4/3) {
    @media only screen and (min-aspect-ratio: 4/3) {

    }
    @media screen and (min-aspect-ratio: 3/2) {
    @media only screen and (min-aspect-ratio: 3/2) {

    }
    @media screen and (min-aspect-ratio: 16/10) {
    @media only screen and (min-aspect-ratio: 16/10) {

    }
    @media screen and (min-aspect-ratio: 16/9) {
    @media only screen and (min-aspect-ratio: 16/9) {

    }
  2. justo revised this gist Sep 6, 2013. 1 changed file with 0 additions and 2 deletions.
    2 changes: 0 additions & 2 deletions mqs.css
    View file
    Original file line number Diff line number Diff line change
    @@ -25,13 +25,11 @@

    }


    /* More comprehensive hidpi detection (not sure if its better or not yet) */
    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {

    }


    /* Common screen size aspect ratio queries */
    @media screen and (min-aspect-ratio: 5/4) {

  3. justo revised this gist Sep 6, 2013. 1 changed file with 20 additions and 8 deletions.
    28 changes: 20 additions & 8 deletions mqs.css
    View file
    Original file line number Diff line number Diff line change
    @@ -26,13 +26,25 @@
    }


    /* More comprehensive hidpi detection */
    @media only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min--moz-device-pixel-ratio: 2),
    only screen and (-moz-min-device-pixel-ratio: 2),
    only screen and (-o-min-device-pixel-ratio: 2/1),
    only screen and (min-device-pixel-ratio: 2),
    only screen and (min-resolution: 192dpi),
    only screen and (min-resolution: 2dppx) {
    /* More comprehensive hidpi detection (not sure if its better or not yet) */
    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {

    }


    /* Common screen size aspect ratio queries */
    @media screen and (min-aspect-ratio: 5/4) {

    }
    @media screen and (min-aspect-ratio: 4/3) {

    }
    @media screen and (min-aspect-ratio: 3/2) {

    }
    @media screen and (min-aspect-ratio: 16/10) {

    }
    @media screen and (min-aspect-ratio: 16/9) {

    }
  4. justo revised this gist Aug 21, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion mqs.css
    View file
    Original file line number Diff line number Diff line change
    @@ -20,7 +20,7 @@

    }

    /* HiDPI Devices */
    /* HiDPI Devices + Print */
    @media print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-device-pixel-ratio : 1.25), (min-resolution: 120dpi) {

    }
  5. justo revised this gist Aug 21, 2013. 1 changed file with 3 additions and 2 deletions.
    5 changes: 3 additions & 2 deletions mqs.css
    View file
    Original file line number Diff line number Diff line change
    @@ -21,10 +21,11 @@
    }

    /* HiDPI Devices */
    @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {

    @media print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-device-pixel-ratio : 1.25), (min-resolution: 120dpi) {
    }


    /* More comprehensive hidpi detection */
    @media only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min--moz-device-pixel-ratio: 2),
  6. justo revised this gist Jul 27, 2013. 1 changed file with 11 additions and 0 deletions.
    11 changes: 11 additions & 0 deletions mqs.css
    View file
    Original file line number Diff line number Diff line change
    @@ -23,4 +23,15 @@
    /* HiDPI Devices */
    @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {

    }

    /* More comprehensive hidpi detection */
    @media only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min--moz-device-pixel-ratio: 2),
    only screen and (-moz-min-device-pixel-ratio: 2),
    only screen and (-o-min-device-pixel-ratio: 2/1),
    only screen and (min-device-pixel-ratio: 2),
    only screen and (min-resolution: 192dpi),
    only screen and (min-resolution: 2dppx) {

    }
  7. justo created this gist Jul 17, 2013.
    26 changes: 26 additions & 0 deletions mqs.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,26 @@
    /* Justin's simple CSS3 media queries (not mobile-first) */

    /* Desktops */
    @media only screen and (min-width : 1024px) {

    }

    /* Tablets */
    @media only screen and (min-width : 641px) and (max-width : 1024px) {

    }

    /* Smartphones (All) */
    @media only screen and (max-width : 640px) {

    }

    /* Smartphones (Small) */
    @media only screen and (max-width : 320px) {

    }

    /* HiDPI Devices */
    @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {

    }