Posted By

iroybot on 09/20/13

Tagged

css
query

Versions (?)

Last Edited at 09/20/13 07:05am

Statistics

Viewed 1165 times

Favorited by 1 user(s)

Related snippets

Media Queries (for Responsive Web Design)

/ Published in: CSS

A couple of useful media queries...

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

/* iPad portrait */
@media only screen and (min-device-width:  768px) and (max-device-width: 1024px) and (orientation: portrait)
 
/* iPad landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape)
 
/* iPhone portrait */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait)
 
/* iPhone landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape)
 
/**
  * other example
  */
 
/* Mobile only */
@media screen and (max-width: 623px)
 
/* For Tablet and Desktop */
@media screen and (min-width: 624px)
 
/* Desktop */
@media screen and (min-width: 948px)