Don't like ads? PRO users don't see any ads ;-)
Guest

Untitled

By: a guest on Aug 6th, 2012  |  syntax: None  |  size: 1.23 KB  |  hits: 10  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
  2.  
  3.  
  4. /* Smartphones (portrait and landscape) ----------- */
  5. @media only screen
  6. and (min-device-width : 320px)
  7. and (max-device-width : 480px) {
  8. /* Styles */
  9. }
  10.  
  11. /* Smartphones (landscape) ----------- */
  12. @media only screen
  13. and (min-width : 321px) {
  14. /* Styles */
  15. }
  16.  
  17. /* Smartphones (portrait) ----------- */
  18. @media only screen
  19. and (max-width : 320px) {
  20. /* Styles */
  21. }
  22.  
  23. /* iPads (portrait and landscape) ----------- */
  24. @media only screen
  25. and (min-device-width : 768px)
  26. and (max-device-width : 1024px) {
  27. /* Styles */
  28. }
  29.  
  30. /* iPads (landscape) ----------- */
  31. @media only screen
  32. and (min-device-width : 768px)
  33. and (max-device-width : 1024px)
  34. and (orientation : landscape) {
  35. /* Styles */
  36. }
  37.  
  38. /* iPads (portrait) ----------- */
  39. @media only screen
  40. and (min-device-width : 768px)
  41. and (max-device-width : 1024px)
  42. and (orientation : portrait) {
  43. /* Styles */
  44. }
  45.  
  46. /* Desktops and laptops ----------- */
  47. @media only screen
  48. and (min-width : 1224px) {
  49. /* Styles */
  50. }
  51.  
  52. /* Large screens ----------- */
  53. @media only screen
  54. and (min-width : 1824px) {
  55. /* Styles */
  56. }
  57.  
  58. /* iPhone 4 ----------- */
  59. @media
  60. only screen and (-webkit-min-device-pixel-ratio : 1.5),
  61. only screen and (min-device-pixel-ratio : 1.5) {
  62. /* Styles */
  63. }