Posted By

alp on 02/14/11


Tagged

media-queries


Versions (?)

Who likes this?

4 people have marked this snippet as a favorite

maltem
rakke
stonetatara
swoicik


Hardboiled CSS3 Media Queries


 / Published in: CSS
 

URL: http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/

  1. /* Smartphones (portrait and landscape) ----------- */
  2. @media only screen
  3. and (min-device-width : 320px)
  4. and (max-device-width : 480px) {
  5. /* Styles */
  6. }
  7.  
  8. /* Smartphones (landscape) ----------- */
  9. @media only screen
  10. and (min-width : 321px) {
  11. /* Styles */
  12. }
  13.  
  14. /* Smartphones (portrait) ----------- */
  15. @media only screen
  16. and (max-width : 320px) {
  17. /* Styles */
  18. }
  19.  
  20. /* iPads (portrait and landscape) ----------- */
  21. @media only screen
  22. and (min-device-width : 768px)
  23. and (max-device-width : 1024px) {
  24. /* Styles */
  25. }
  26.  
  27. /* iPads (landscape) ----------- */
  28. @media only screen
  29. and (min-device-width : 768px)
  30. and (max-device-width : 1024px)
  31. and (orientation : landscape) {
  32. /* Styles */
  33. }
  34.  
  35. /* iPads (portrait) ----------- */
  36. @media only screen
  37. and (min-device-width : 768px)
  38. and (max-device-width : 1024px)
  39. and (orientation : portrait) {
  40. /* Styles */
  41. }
  42.  
  43. /* Desktops and laptops ----------- */
  44. @media only screen
  45. and (min-width : 1224px) {
  46. /* Styles */
  47. }
  48.  
  49. /* Large screens ----------- */
  50. @media only screen
  51. and (min-width : 1824px) {
  52. /* Styles */
  53. }
  54.  
  55. /* iPhone 4 ----------- */
  56. @media
  57. only screen and (-webkit-min-device-pixel-ratio : 1.5),
  58. only screen and (min-device-pixel-ratio : 1.5) {
  59. /* Styles */
  60. }
  61.  
  62. <head>
  63.  
  64. <link rel="stylesheet" href="smartphone.css"
  65. media="only screen and (min-device-width : 320px)
  66. and (max-device-width : 480px)">
  67.  
  68. <link rel="stylesheet" href="smartphone-landscape.css"
  69. media="only screen and (min-width : 321px)">
  70.  
  71. <link rel="stylesheet" href="smartphone-portrait.css"
  72. media="only screen and (max-width : 320px)">
  73.  
  74. <link rel="stylesheet" href="ipad.css"
  75. media="only screen
  76. and (min-device-width : 768px)
  77. and (max-device-width : 1024px)">
  78.  
  79. <link rel="stylesheet" href="ipad-landscape.css"
  80. media="only screen
  81. and (min-device-width : 768px)
  82. and (max-device-width : 1024px)
  83. and (orientation : landscape)">
  84.  
  85. <link rel="stylesheet" href="ipad-portrait.css"
  86. media="only screen
  87. and (min-device-width : 768px)
  88. and (max-device-width : 1024px)
  89. and (orientation : portrait)">
  90.  
  91. <link rel="stylesheet" href="widescreen.css"
  92. media="only screen and (min-width : 1824px)">
  93.  
  94. <link rel="stylesheet" href="iphone4.css"
  95. media="only screen
  96. and (-webkit-min-device-pixel-ratio : 1.5),
  97. only screen and (min-device-pixel-ratio : 1.5)">
  98.  
  99. </head>

Report this snippet  

You need to login to post a comment.