advanced code snippet search

Posted By

kenjosan on 01/03/13


Tagged

css


Versions (?)

MediaQueries

 / Published in: Other
 

Check out Chris Coyiers tutorial about media queries http://css-tricks.com/css-media-queries/

Expand | Embed | Plain Text 
  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. }

Report this snippet  

You need to login to post a comment.