Skip to content

Instantly share code, notes, and snippets.

@amitabhaghosh197

amitabhaghosh197/mediaqueries.css

Forked from needim/mediaqueries.css
Last active May 5, 2018 10:56
Show Gist options

  • Select an option

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

Select an option

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

Revisions

  1. amitabhaghosh197 revised this gist May 5, 2018. No changes.
  2. @needim needim renamed this gist May 27, 2015. 1 changed file with 0 additions and 0 deletions.
    0 gistfile1.css → mediaqueries.css
    View file
    File renamed without changes.
  3. @needim needim revised this gist May 27, 2015. 1 changed file with 240 additions and 1 deletion.
    241 changes: 240 additions & 1 deletion gistfile1.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,7 @@
    /*
    Based on: http://stephen.io/mediaqueries
    Based on:
    1. http://stephen.io/mediaqueries
    2. https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
    */

    /* iPhone 6 in portrait & landscape */
    @@ -122,6 +124,110 @@ and (orientation : portrait) {

    }

    /* Galaxy S3 portrait and landscape */
    @media screen
    and (device-width: 320px)
    and (device-height: 640px)
    and (-webkit-device-pixel-ratio: 2) {

    }

    /* Galaxy S3 portrait */
    @media screen
    and (device-width: 320px)
    and (device-height: 640px)
    and (-webkit-device-pixel-ratio: 2)
    and (orientation: portrait) {

    }

    /* Galaxy S3 landscape */
    @media screen
    and (device-width: 320px)
    and (device-height: 640px)
    and (-webkit-device-pixel-ratio: 2)
    and (orientation: landscape) {

    }

    /* Galaxy S4 portrait and landscape */
    @media screen
    and (device-width: 320px)
    and (device-height: 640px)
    and (-webkit-device-pixel-ratio: 3) {

    }

    /* Galaxy S4 portrait */
    @media screen
    and (device-width: 320px)
    and (device-height: 640px)
    and (-webkit-device-pixel-ratio: 3)
    and (orientation: portrait) {

    }

    /* Galaxy S4 landscape */
    @media screen
    and (device-width: 320px)
    and (device-height: 640px)
    and (-webkit-device-pixel-ratio: 3)
    and (orientation: landscape) {

    }

    /* Galaxy S5 portrait and landscape */
    @media screen
    and (device-width: 360px)
    and (device-height: 640px)
    and (-webkit-device-pixel-ratio: 3) {

    }

    /* Galaxy S5 portrait */
    @media screen
    and (device-width: 360px)
    and (device-height: 640px)
    and (-webkit-device-pixel-ratio: 3)
    and (orientation: portrait) {

    }

    /* Galaxy S5 landscape */
    @media screen
    and (device-width: 360px)
    and (device-height: 640px)
    and (-webkit-device-pixel-ratio: 3)
    and (orientation: landscape) {

    }

    /* HTC One portrait and landscape */
    @media screen
    and (device-width: 360px)
    and (device-height: 640px)
    and (-webkit-device-pixel-ratio: 3) {

    }

    /* HTC One portrait */
    @media screen
    and (device-width: 360px)
    and (device-height: 640px)
    and (-webkit-device-pixel-ratio: 3)
    and (orientation: portrait) {

    }

    /* HTC One landscape */
    @media screen
    and (device-width: 360px)
    and (device-height: 640px)
    and (-webkit-device-pixel-ratio: 3)
    and (orientation: landscape) {

    }

    /*
    iPad 3 & 4 Media Queries
    If you're looking to target only 3rd and 4th generation Retina iPads
    @@ -212,4 +318,137 @@ and (max-device-width : 1024px)
    and (orientation : portrait)
    and (-webkit-min-device-pixel-ratio: 1) {

    }

    /* Galaxy Tab 10.1 portrait and landscape */
    @media
    (min-device-width: 800px)
    and (max-device-width: 1280px) {

    }

    /* Galaxy Tab 10.1 portrait */
    @media
    (max-device-width: 800px)
    and (orientation: portrait) {

    }

    /* Galaxy Tab 10.1 landscape */
    @media
    (max-device-width: 1280px)
    and (orientation: landscape) {

    }

    /* Asus Nexus 7 portrait and landscape */
    @media screen
    and (device-width: 601px)
    and (device-height: 906px)
    and (-webkit-min-device-pixel-ratio: 1.331)
    and (-webkit-max-device-pixel-ratio: 1.332) {

    }

    /* Asus Nexus 7 portrait */
    @media screen
    and (device-width: 601px)
    and (device-height: 906px)
    and (-webkit-min-device-pixel-ratio: 1.331)
    and (-webkit-max-device-pixel-ratio: 1.332)
    and (orientation: portrait) {

    }

    /* Asus Nexus 7 landscape */
    @media screen
    and (device-width: 601px)
    and (device-height: 906px)
    and (-webkit-min-device-pixel-ratio: 1.331)
    and (-webkit-max-device-pixel-ratio: 1.332)
    and (orientation: landscape) {

    }

    /* Kindle Fire HD 7" portrait and landscape */
    @media only screen
    and (min-device-width: 800px)
    and (max-device-width: 1280px)
    and (-webkit-min-device-pixel-ratio: 1.5) {

    }

    /* Kindle Fire HD 7" portrait */
    @media only screen
    and (min-device-width: 800px)
    and (max-device-width: 1280px)
    and (-webkit-min-device-pixel-ratio: 1.5)
    and (orientation: portrait) {

    }

    /* Kindle Fire HD 7" landscape */
    @media only screen
    and (min-device-width: 800px)
    and (max-device-width: 1280px)
    and (-webkit-min-device-pixel-ratio: 1.5)
    and (orientation: landscape) {

    }

    /* Kindle Fire HD 8.9" portrait and landscape */
    @media only screen
    and (min-device-width: 1200px)
    and (max-device-width: 1600px)
    and (-webkit-min-device-pixel-ratio: 1.5) {

    }

    /* Kindle Fire HD 8.9" portrait */
    @media only screen
    and (min-device-width: 1200px)
    and (max-device-width: 1600px)
    and (-webkit-min-device-pixel-ratio: 1.5)
    and (orientation: portrait) {

    }

    /* Kindle Fire HD 8.9" landscape */
    @media only screen
    and (min-device-width: 1200px)
    and (max-device-width: 1600px)
    and (-webkit-min-device-pixel-ratio: 1.5)
    and (orientation: landscape) {

    }

    /* Laptops non-retina screens */
    @media screen
    and (min-device-width: 1200px)
    and (max-device-width: 1600px)
    and (-webkit-min-device-pixel-ratio: 1) {

    }

    /* Laptops retina screens */
    @media screen
    and (min-device-width: 1200px)
    and (max-device-width: 1600px)
    and (-webkit-min-device-pixel-ratio: 2)
    and (min-resolution: 192dpi) {

    }

    /* Apple Watch */
    @media
    (max-device-width: 42mm)
    and (min-device-width: 38mm) {

    }

    /* Moto 360 Watch */
    @media
    (max-device-width: 218px)
    and (max-device-height: 281px) {

    }
  4. @needim needim revised this gist May 27, 2015. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions gistfile1.css
    View file
    Original file line number Diff line number Diff line change
    @@ -75,6 +75,7 @@ and (orientation : portrait) {
    iPhone 2G, 3G, 4, 4S Media Queries
    It's noteworthy that these media queries are also the same for iPod Touch generations 1-4.
    */

    /* iPhone 2G-4S in portrait & landscape */
    @media only screen
    and (min-device-width : 320px)
  5. @needim needim created this gist May 27, 2015.
    214 changes: 214 additions & 0 deletions gistfile1.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,214 @@
    /*
    Based on: http://stephen.io/mediaqueries
    */

    /* iPhone 6 in portrait & landscape */
    @media only screen
    and (min-device-width : 375px)
    and (max-device-width : 667px) {

    }

    /* iPhone 6 in landscape */
    @media only screen
    and (min-device-width : 375px)
    and (max-device-width : 667px)
    and (orientation : landscape) {

    }

    /* iPhone 6 in portrait */
    @media only screen
    and (min-device-width : 375px)
    and (max-device-width : 667px)
    and (orientation : portrait) {

    }

    /* iPhone 6 Plus in portrait & landscape */
    @media only screen
    and (min-device-width : 414px)
    and (max-device-width : 736px) {

    }

    /* iPhone 6 Plus in landscape */
    @media only screen
    and (min-device-width : 414px)
    and (max-device-width : 736px)
    and (orientation : landscape) {

    }

    /* iPhone 6 Plus in portrait */
    @media only screen
    and (min-device-width : 414px)
    and (max-device-width : 736px)
    and (orientation : portrait) {

    }

    /* iPhone 5 & 5S in portrait & landscape */
    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 568px) {

    }

    /* iPhone 5 & 5S in landscape */
    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 568px)
    and (orientation : landscape) {

    }

    /* iPhone 5 & 5S in portrait */
    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 568px)
    and (orientation : portrait) {

    }

    /*
    iPhone 2G, 3G, 4, 4S Media Queries
    It's noteworthy that these media queries are also the same for iPod Touch generations 1-4.
    */
    /* iPhone 2G-4S in portrait & landscape */
    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px) {

    }

    /* iPhone 2G-4S in landscape */
    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px)
    and (orientation : landscape) {

    }

    /* iPhone 2G-4S in portrait */
    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px)
    and (orientation : portrait) {

    }

    /* iPad in portrait & landscape */
    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px) {

    }

    /* iPad in landscape */
    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px)
    and (orientation : landscape) {

    }

    /* iPad in portrait */
    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px)
    and (orientation : portrait) {

    }

    /*
    iPad 3 & 4 Media Queries
    If you're looking to target only 3rd and 4th generation Retina iPads
    (or tablets with similar resolution) to add @2x graphics,
    or other features for the tablet's Retina display, use the following media queries.
    */

    /* Retina iPad in portrait & landscape */
    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px)
    and (-webkit-min-device-pixel-ratio: 2) {

    }

    /* Retina iPad in landscape */
    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px)
    and (orientation : landscape)
    and (-webkit-min-device-pixel-ratio: 2) {

    }

    /* Retina iPad in portrait */
    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px)
    and (orientation : portrait)
    and (-webkit-min-device-pixel-ratio: 2) {

    }

    /*
    iPad 1 & 2 Media Queries
    If you're looking to supply different graphics or choose different typography
    for the lower resolution iPad display, the media queries below will work
    like a charm in your responsive design!
    */

    /* iPad 1 & 2 in portrait & landscape */
    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px)
    and (-webkit-min-device-pixel-ratio: 1) {

    }

    /* iPad 1 & 2 in landscape */
    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px)
    and (orientation : landscape)
    and (-webkit-min-device-pixel-ratio: 1) {

    }

    /* iPad 1 & 2 in portrait */
    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px)
    and (orientation : portrait)
    and (-webkit-min-device-pixel-ratio: 1) {

    }

    /* iPad mini in portrait & landscape */
    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px)
    and (-webkit-min-device-pixel-ratio: 1) {

    }

    /* iPad mini in landscape */
    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px)
    and (orientation : landscape)
    and (-webkit-min-device-pixel-ratio: 1) {

    }

    /* iPad mini in portrait */
    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px)
    and (orientation : portrait)
    and (-webkit-min-device-pixel-ratio: 1) {

    }