Posted By

LukeLux on 10/07/10


Tagged

textmate CSS3 media-query


Versions (?)

Who likes this?

5 people have marked this snippet as a favorite

FredericoFigo
bryanblake
creativeboulder
Pixxell
esteinborn


Media Query - CSS3


 / Published in: Other
 

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

Report this snippet  

You need to login to post a comment.