Profile image for Joost Kiens joost.kiens
Most common @media queries for handheld devices and desktops
Language
CSS
Tags
css3
Favorited By
Profile image for Tom Hancock Profile image for omar gourari Profile image for Der Dools Profile image for Nick Evanish Profile image for Daniel Low Profile image for Greg Berlin Profile image for adfasf asdfasdfadsf Profile image for Marcus Stephens Profile image for Igor T Profile image for Ly Nguyen Profile image for Kobus Myburgh Profile image for Theoni Nuin Profile image for Ashley Cameron Profile image for Santiago Paz Profile image for Fabrice Mennechez Profile image for Lise Strandlien Profile image for ruben campos Profile image for Mauro Artizzu Profile image for Tae Kim Profile image for Yassine Yas

Common @media queries

1 /* Smartphones (portrait and landscape) ----------- */ 2 @media only screen 3 and (min-device-width : 320px) 4 and (max-device-width : 480px) { 5 /* Styles */ 6 } 7 /* Smartphones (landscape) ----------- */ 8 @media only screen 9 and (min-width : 321px) { 10 /* Styles */ 11 } 12 /* Smartphones (portrait) ----------- */ 13 @media only screen 14 and (max-width : 320px) { 15 /* Styles */ 16 } 17 /* iPads (portrait and landscape) ----------- */ 18 @media only screen 19 and (min-device-width : 768px) 20 and (max-device-width : 1024px) { 21 /* Styles */ 22 } 23 /* iPads (landscape) ----------- */ 24 @media only screen 25 and (min-device-width : 768px) 26 and (max-device-width : 1024px) 27 and (orientation : landscape) { 28 /* Styles */ 29 } 30 /* iPads (portrait) ----------- */ 31 @media only screen 32 and (min-device-width : 768px) 33 and (max-device-width : 1024px) 34 and (orientation : portrait) { 35 /* Styles */ 36 } 37 /* Desktops and laptops ----------- */ 38 @media only screen 39 and (min-width : 1224px) { 40 /* Styles */ 41 } 42 /* Large screens ----------- */ 43 @media only screen 44 and (min-width : 1824px) { 45 /* Styles */ 46 } 47 /* iPhone 4 ----------- */ 48 @media 49 only screen and (-webkit-min-device-pixel-ratio : 1.5), 50 only screen and (min-device-pixel-ratio : 1.5) { 51 /* Styles */ 52 } 53 54 55 /* 56 Source: http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/ 57 */

Comments

Profile image for Kobus Myburgh bliksempie 2013-11-14

Thanks - nice for building mobile sites. Good to have a reference on hand.