Skip to content

Instantly share code, notes, and snippets.

@acconrad

acconrad/mq.css

Forked from chriscoyier/mq.css
Created October 8, 2012 10:35
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save acconrad/3851879 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save acconrad/3851879 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @chriscoyier chriscoyier revised this gist Oct 3, 2012. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions mq.css
    View file
    Original file line number Diff line number Diff line change
    @@ -18,7 +18,7 @@ only screen and ( min-resolution: 2dppx) and (min-width: 320px)

    @media only screen and (min-width: 700px) {

    /* Small screen, non-retina */
    /* Medium screen, non-retina */

    }

    @@ -30,13 +30,13 @@ only screen and ( min-device-pixel-ratio: 2) and (min-width: 700px),
    only screen and ( min-resolution: 192dpi) and (min-width: 700px),
    only screen and ( min-resolution: 2dppx) and (min-width: 700px) {

    /* Small screen, retina, stuff to override above media query */
    /* Medium screen, retina, stuff to override above media query */

    }

    @media only screen and (min-width: 1300px) {

    /* Small screen, non-retina */
    /* Large screen, non-retina */

    }

    @@ -48,7 +48,7 @@ only screen and ( min-device-pixel-ratio: 2) and (min-width: 1300px)
    only screen and ( min-resolution: 192dpi) and (min-width: 1300px),
    only screen and ( min-resolution: 2dppx) and (min-width: 1300px) {

    /* Small screen, retina, stuff to override above media query */
    /* Large screen, retina, stuff to override above media query */

    }

  2. @chriscoyier chriscoyier created this gist Oct 3, 2012.
    54 changes: 54 additions & 0 deletions mq.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,54 @@
    @media only screen and (min-width: 320px) {

    /* Small screen, non-retina */

    }

    @media
    only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px),
    only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 320px),
    only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px),
    only screen and ( min-device-pixel-ratio: 2) and (min-width: 320px),
    only screen and ( min-resolution: 192dpi) and (min-width: 320px),
    only screen and ( min-resolution: 2dppx) and (min-width: 320px) {

    /* Small screen, retina, stuff to override above media query */

    }

    @media only screen and (min-width: 700px) {

    /* Small screen, non-retina */

    }

    @media
    only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 700px),
    only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 700px),
    only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 700px),
    only screen and ( min-device-pixel-ratio: 2) and (min-width: 700px),
    only screen and ( min-resolution: 192dpi) and (min-width: 700px),
    only screen and ( min-resolution: 2dppx) and (min-width: 700px) {

    /* Small screen, retina, stuff to override above media query */

    }

    @media only screen and (min-width: 1300px) {

    /* Small screen, non-retina */

    }

    @media
    only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1300px),
    only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 1300px),
    only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 1300px),
    only screen and ( min-device-pixel-ratio: 2) and (min-width: 1300px),
    only screen and ( min-resolution: 192dpi) and (min-width: 1300px),
    only screen and ( min-resolution: 2dppx) and (min-width: 1300px) {

    /* Small screen, retina, stuff to override above media query */

    }