Advanced Search

Hardboiled CSS3 Media Queries

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

Expand | Embed | Plain Text

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

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.