Advertisement
leadbellydesign

All Common CSS Media Queries

Dec 17th, 2013
67
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 3.72 KB | None | 0 0
  1. /* From Code Tricks: http://code-tricks.com/css-media-queries-for-common-devices/ */
  2. /* All Smartphones in portrait and landscape ----------- */
  3. @media only screen
  4. and (min-device-width : 320px)
  5. and (max-device-width : 480px) {
  6. /* YOUR STYLE GOES HERE */
  7. }
  8.  
  9. /* All Smartphones in landscape ----------- */
  10. @media only screen
  11. and (min-width : 321px) {
  12. /* YOUR STYLE GOES HERE */
  13. }
  14.  
  15. /* All Smartphones in portrait ----------- */
  16. @media only screen
  17. and (max-width : 479px) {
  18. /* YOUR STYLE GOES HERE */
  19. }
  20.  
  21. /***** ANDROID DEVICES *****/
  22.  
  23. /* Android 240 X 320 ----------- */
  24. @media only screen
  25. and (max-width: 241px){
  26. /* YOUR STYLE GOES HERE */
  27. }
  28.  
  29. /* Android(Samsung Galaxy) in portrait 380 X 685 ----------- */
  30. @media only screen
  31. and (min-width: 375px)
  32. and (max-width: 385px){
  33. /* YOUR STYLE GOES HERE */
  34. }
  35.  
  36. /* Android(Samsung Galaxy) in Landscape 685 X  380 ----------- */
  37. @media only screen
  38. and (min-width: 680px)
  39. and (max-width: 690px){
  40. /* YOUR STYLE GOES HERE */
  41. }
  42.  
  43. /* Kindle Portrait 600 X 1024 ----------- */
  44. @media only screen
  45. and (min-width: 595px)
  46. and (max-width: 610px){
  47. /* YOUR STYLE GOES HERE */
  48. }
  49.  
  50. /* Kindle Landscape 1024 X 600 ----------- */
  51. @media only screen
  52. and (min-width: 1000px)
  53. and (max-width: 1030px){
  54. /* YOUR STYLE GOES HERE */
  55. }
  56.  
  57. /***** ALL GENERATION IPADS *****/
  58.  
  59. /* iPads in portrait and landscape----------- */
  60. @media only screen
  61. and (min-device-width : 768px)
  62. and (max-device-width : 1024px) {
  63. /* YOUR STYLE GOES HERE */  
  64. }
  65.  
  66. /* iPad in landscape----------- */
  67. @media only screen
  68. and (min-device-width : 768px)
  69. and (max-device-width : 1024px)
  70. and (orientation : landscape) {
  71. /* YOUR STYLE GOES HERE */
  72. }
  73.  
  74. /* iPad in portrait----------- */
  75. @media only screen
  76. and (min-device-width : 768px)
  77. and (max-device-width : 1024px)
  78. and (orientation : portrait){
  79. /* YOUR STYLE GOES HERE */
  80. }
  81.  
  82.  
  83.  
  84. /***** Retina IPAD 3 & 4*****/
  85.  
  86. /* Retina iPad 3 & 4 in portrait and landscape----------- */
  87. @media only screen
  88. and (min-device-width : 768px)
  89. and (max-device-width : 1024px)
  90. and (-webkit-min-device-pixel-ratio: 2){
  91. /* YOUR STYLE GOES HERE */
  92. }
  93.  
  94. /* Retina iPad 3 & 4 in landscape----------- */
  95.  
  96. @media only screen
  97. and (min-device-width : 768px)
  98. and (max-device-width : 1024px)
  99. and (orientation : landscape)
  100. and (-webkit-min-device-pixel-ratio: 2){
  101. /* YOUR STYLE GOES HERE */
  102. }
  103.  
  104. /* Retina iPad 3 & 4 in landscape----------- */
  105.  
  106. @media only screen
  107. and (min-device-width : 768px)
  108. and (max-device-width : 1024px)
  109. and (orientation : portrait)
  110. and (-webkit-min-device-pixel-ratio: 2){
  111. /* YOUR STYLE GOES HERE */
  112. }
  113.  
  114.  
  115.  
  116.  
  117. /***** IPAD 1 & 2 (ALSO IPAD MINI)*****/
  118.  
  119. /* iPad 1 & 2 in portrait and landscape ----------- */
  120. @media only screen
  121. and (min-device-width : 768px)
  122. and (max-device-width : 1024px)
  123. and (-webkit-min-device-pixel-ratio: 1){
  124. /* YOUR STYLE GOES HERE */
  125. }
  126.  
  127. /* iPad 1 & 2 in landscape ----------- */
  128. @media only screen
  129. and (min-device-width : 768px)
  130. and (max-device-width : 1024px)
  131. and (orientation : landscape)
  132. and (-webkit-min-device-pixel-ratio: 1)  {
  133. /* YOUR STYLE GOES HERE */
  134. }
  135.  
  136. /* iPad 1 & 2 in portrait ----------- */
  137. @media only screen
  138. and (min-device-width : 768px)
  139. and (max-device-width : 1024px)
  140. and (orientation : portrait)
  141. and (-webkit-min-device-pixel-ratio: 1){
  142. /* YOUR STYLE GOES HERE */
  143. }
  144.  
  145. /* Desktops and laptops ----------- */
  146. @media only screen
  147. and (min-width : 1224px) {
  148. /* YOUR STYLE GOES HERE */
  149. }
  150.  
  151. /* Large screens ----------- */
  152. @media only screen
  153. and (min-width : 1824px) {
  154. /* YOUR STYLE GOES HERE */
  155. }
  156.  
  157. /* Only iPhone 4 ----------- */
  158. @media
  159. only screen and (-webkit-min-device-pixel-ratio : 1.5),
  160. only screen and (min-device-pixel-ratio : 1.5) {
  161. /* YOUR STYLE GOES HERE */
  162. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement