Media Queries (for Responsive Web Design)


/ Published in: CSS
Save to your folder(s)

A couple of useful media queries...


Copy this code and paste it in your HTML
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.