Media Query Snippets

  • all
  • monitors
  • smart phones
  • tablets
320px

@media screen and (max-width: 320px) {

}

640px

@media screen and (max-width: 640px) {

}

800px

@media screen and (max-width: 800px) {

}

1024px

@media screen and (max-width: 1024px) {

}

1028px

@media screen and (max-width: 1028px) {

}

BlackBerry Torch

Landscape

@media screen and (max-device-width: 480px) {

}

iPhone

Landscape

@media screen and (max-device-width: 480px) {

}

Portrait

@media screen and (max-device-width: 320px) {

}

iPhone 3G

@media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1){

}

iPhone 4

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

}

iPhone 5

@media screen and (device-aspect-ratio: 40/71) {

}

or

@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){

}

HTC Evo

Landscape

@media screen and (max-device-width: 480px) {

}

HD2

Landscape

@media screen and (max-device-width: 480px) {

}

HTC Thunderbolt

Landscape

@media screen and (max-device-width: 480px) {

}

Samsung Galaxy S2

@media screen and (device-width: 320px) and (device-height: 533px) and (-webkit-device-pixel-ratio: 1.5) {

}

Samsung Galaxy S3

@media only screen and (-webkit-device-pixel-ratio: 2) {

}

Acer Iconia Tab A100

Landscape

@media (max-device-width: 1024px) and (orientation: landscape) {

}

Portrait

@media (max-device-width: 600px) and (orientation: portrait) {

}

Acer Iconia Tab A500

Landscape

@media (max-device-width: 1280px) and (orientation: landscape) {

}

Portrait

@media (max-device-width: 800px) and (orientation: portrait) {

}

Archos 70

Landscape

@media (max-device-width: 800px) and (orientation: landscape) {

}

Portrait

@media (max-device-width: 400px) and (orientation: portrait) {

}

Archos 101

Landscape

@media (max-device-width: 1024px) and (orientation: landscape) {

}

Portrait

@media (max-device-width: 600px) and (orientation: portrait) {

}

ASUS Eee Pad Slider

Landscape

@media (max-device-width: 1080px) and (orientation: landscape) {

}

Portrait

@media (max-device-width: 800px) and (orientation: portrait) {

}

Asus Eee Pad Transformer

Landscape

@media (max-device-width: 1080px) and (orientation: landscape) {

}

Portrait

@media (max-device-width: 800px) and (orientation: portrait) {

}

Augen GenTouch78

Landscape

@media (max-device-width: 800px) and (orientation: landscape) {

}

Portrait

@media (max-device-width: 480px) and (orientation: portrait) {

}

BlackBerry PlayBook

Landscape

@media (max-device-width: 1024px) and (orientation: landscape) {

}

Portrait

@media (max-device-width: 600px) and (orientation: portrait) {

}

Coby Kyros MID1024,MID1125

Landscape

@media (max-device-width: 1024px) and (orientation: landscape) {

}

Portrait

@media (max-device-width: 600px) and (orientation: portrait) {

}

Coby Kyros MID8125,MID8024

Landscape

@media (max-device-width: 800px) and (orientation: landscape) {

}

Portrait

@media (max-device-width: 600px) and (orientation: portrait) {

}

Coby Kyros MID7015,MID7016

Landscape

@media (max-device-width: 800px) and (orientation: landscape) {

}

Portrait

@media (max-device-width: 480px) and (orientation: portrait) {

}

Coby Kyros MID7022,MID7024

Landscape

@media (max-device-width: 800px) and (orientation: landscape) {

}

Portrait

@media (max-device-width: 480px) and (orientation: portrait) {

}

Coby Kyros MID7125

Landscape

@media (max-device-width: 800px) and (orientation: landscape) {

}

Portrait

@media (max-device-width: 480px) and (orientation: portrait) {

}

CTL 2goPad SL10

Landscape

@media (max-device-width: 1024px) and (orientation: landscape) {

}

Portrait

@media (max-device-width: 600px) and (orientation: portrait) {

}

Dell Streak 5

Landscape

@media (max-device-width: 800px) and (orientation: landscape) {

}

Portrait

@media (max-device-width: 480px) and (orientation: portrait) {

}

Dell Streak 7

Landscape

@media (max-device-width: 800px) and (orientation: landscape) {

}

Portrait

@media (max-device-width: 480px) and (orientation: portrait) {

}

EFun Nextbook Next5

Landscape

@media (max-device-width: 800px) and (orientation: landscape) {

}

Portrait

@media (max-device-width: 480px) and (orientation: portrait) {

}

ExoPC Slate

Landscape

@media (max-device-width: 1366px) and (orientation: landscape) {

}

Portrait

@media (max-device-width: 768px) and (orientation: portrait) {

}

Google Nexus 7

@media screen and (device-width: 600px) and (device-height: 905px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) {

}

HP TouchPad

Landscape

@media (max-device-width: 1024px) and (orientation: landscape) {

}

Portrait

@media (max-device-width: 768px) and (orientation: portrait) {

}

HTC EVO View 4G

Landscape

@media (max-device-width: 1024px) and (orientation: landscape) {

}

Portrait

@media (max-device-width: 600px) and (orientation: portrait) {

}

HTC Flyer

Landscape

@media (max-device-width: 1024px) and (orientation: landscape) {

}

Portrait

@media (max-device-width: 600px) and (orientation: portrait) {

}

iPad Mini

@media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1) {

}

iPad

Landscape

@media (max-device-width: 1024px) and (orientation: landscape) {

}

Portrait

@media (max-device-width: 768px) and (orientation: portrait) {

}

iPad 2

Landscape

@media (max-device-width: 1024px) and (orientation: landscape) {

}

Portrait

@media (max-device-width: 768px) and (orientation: portrait) {

}

iPad 3

Landscape

@media (max-device-width: 1024px) and (orientation: landscape) {

}

Portrait

@media (max-device-width: 768px) and (orientation: portrait) {

}

iPad 4

@media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) {

}

Lenovo IdeaPad K1

Landscape

@media (max-device-width: 1280px) and (orientation: landscape) {

}

Portrait

@media (max-device-width: 800px) and (orientation: portrait) {

}

Lenovo ThinkPad Tablet

Landscape

@media (max-device-width: 1280px) and (orientation: landscape) {

}

Portrait

@media (max-device-width: 800px) and (orientation: portrait) {

}

Maylong Universe M 150

Landscape

@media (max-device-width: 800px) and (orientation: landscape) {

}

Portrait

@media (max-device-width: 480px) and (orientation: portrait) {

}

Motorola's Xoom

Landscape

@media (max-device-width: 1280px) and (orientation: landscape) {

}

Portrait

@media (max-device-width: 800px) and (orientation: portrait) {

}

Netbook Navigator Nav 9 Slate PC

Landscape

@media (max-device-width: 1024px) and (orientation: landscape) {

}

Portrait

@media (max-device-width: 600px) and (orientation: portrait) {

}

Samsung GALAXY Tab 10.1

Landscape

@media (max-device-width: 1280px) and (orientation: landscape) {

}

Portrait

@media (max-device-width: 800px) and (orientation: portrait) {

}

Sony Tablet S

Landscape

@media (max-device-width: 1280px) and (orientation: landscape) {

}

Portrait

@media (max-device-width: 800px) and (orientation: portrait) {

}

T-Mobile G-Slate

Landscape

@media (max-device-width: 1280px) and (orientation: landscape) {

}

Portrait

@media (max-device-width: 768px) and (orientation: portrait) {

}

Toshiba Thrive

Landscape

@media (max-device-width: 1280px) and (orientation: landscape) {

}

Portrait

@media (max-device-width: 800px) and (orientation: portrait) {

}

Velocity Micro Cruz

Landscape

@media (max-device-width: 800px) and (orientation: landscape) {

}

Portrait

@media (max-device-width: 480px) and (orientation: portrait) {

}

ViewSonic ViewPad 7

Landscape

@media (max-device-width: 800px) and (orientation: landscape) {

}

Portrait

@media (max-device-width: 480px) and (orientation: portrait) {

}

ViewSonic ViewPad 10

Landscape

@media (max-device-width: 1024px) and (orientation: landscape) {

}

Portrait

@media (max-device-width: 600px) and (orientation: portrait) {

}

Vizio Tablet VTAB1008

Landscape

@media (max-device-width: 1024px) and (orientation: landscape) {

}

Portrait

@media (max-device-width: 768px) and (orientation: portrait) {

}

david nemes | @nmsdvid | feedback / suggestion / add new snippets