Posted By

iroybot on 09/20/13


Tagged

css query media mediaquery responsive


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

fhenderson


Media Queries (for Responsive Web Design)


 / Published in: CSS
 

A couple of useful media queries...

  1. /* iPad portrait */
  2. @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait)
  3.  
  4. /* iPad landscape */
  5. @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape)
  6.  
  7. /* iPhone portrait */
  8. @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait)
  9.  
  10. /* iPhone landscape */
  11. @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape)
  12.  
  13. /**
  14.   * other example
  15.   */
  16.  
  17. /* Mobile only */
  18. @media screen and (max-width: 623px)
  19.  
  20. /* For Tablet and Desktop */
  21. @media screen and (min-width: 624px)
  22.  
  23. /* Desktop */
  24. @media screen and (min-width: 948px)

Report this snippet  

You need to login to post a comment.