Advertisement
tommyosheawebdesign

CSS Media Queries

Jan 6th, 2020
392
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.53 KB | None | 0 0
  1. /* (320x480) iPhone (Original, 3G, 3GS) */
  2. @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  3.     /* insert styles here */
  4. }
  5.  
  6. /* (320x480) Smartphone, Portrait */
  7. @media only screen and (device-width: 320px) and (orientation: portrait) {
  8.     /* insert styles here */
  9. }
  10.  
  11. /* (320x480) Smartphone, Landscape */
  12. @media only screen and (device-width: 480px) and (orientation: landscape) {
  13.     /* insert styles here */
  14. }
  15.  
  16. /* (480x800) Android */
  17. @media only screen and (min-device-width: 480px) and (max-device-width: 800px) {
  18.     /* insert styles here */
  19. }
  20.  
  21. /* (640x960) iPhone 4 & 4S */
  22. @media only screen and (min-device-width: 640px) and (max-device-width: 960px) {
  23.     /* insert styles here */
  24. }
  25.  
  26. /* (720x1280) Galaxy Nexus, WXGA */
  27. @media only screen and (min-device-width: 720px) and (max-device-width: 1280px) {
  28.     /* insert styles here */
  29. }
  30.  
  31. /* (720x1280) Galaxy Nexus, Landscape */
  32. @media only screen and (min-device-width: 720px) and (max-device-width: 1280px) and (orientation: landscape) {
  33.     /* insert styles here */
  34. }
  35.  
  36. /* (1024x768) iPad 1 & 2, XGA */
  37. @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  38.     /* insert styles here */
  39. }
  40.  
  41. /* (768x1024) iPad 1 & 2, Portrait */
  42. @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  43.     /* insert styles here */
  44. }
  45.  
  46. /* (1024x768) iPad 1 & 2, Landscape */
  47. @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  48.     /* insert styles here */
  49. }
  50.  
  51. /* (2048x1536) iPad 3 */
  52. @media only screen and (min-device-width: 1536px) and (max-device-width: 2048px) {
  53.     /* insert styles here */
  54. }
  55.  
  56. /* (1280x720) Galaxy Note 2, WXGA */
  57. @media only screen and (min-device-width: 720px) and (max-device-width: 1280px) {
  58.     /* insert styles here */
  59. }
  60.  
  61. /* (1366x768) WXGA Display */
  62. @media  screen and (max-width: 1366px) {
  63.     /* insert styles here */
  64. }
  65.  
  66. /* (1280x1024) SXGA Display */
  67. @media  screen and (max-width: 1280px) {
  68.     /* insert styles here */
  69. }
  70.  
  71. /* (1440x900) WXGA+ Display */
  72. @media  screen and (max-width: 1440px) {
  73.     /* insert styles here */
  74. }
  75.  
  76. /* (1680x1050) WSXGA+ Display */
  77. @media  screen and (max-width: 1680px) {
  78.     /* insert styles here */
  79. }
  80.  
  81. /* (1920x1080) Full HD Display */
  82. @media  screen and (max-width: 1920px) {
  83.     /* insert styles here */
  84. }
  85.  
  86. /* (1600x900) HD+ Display */
  87. @media  screen and (max-width: 1600px) {
  88.     /* insert styles here */
  89. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement