Advanced Search

CSS3 Media Queries for different devices

/ 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. }

URL: http://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.