tommyosheawebdesign

CSS Media Queries

Feb 12th, 2020
199
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 0.96 KB | None | 0 0
  1. /*
  2.   ##Device = Desktops
  3.   ##Screen = 1281px to higher resolution desktops
  4. */
  5.  
  6. @media (min-width: 1281px) {
  7.  
  8.   //CSS
  9.  
  10. }
  11.  
  12. /*
  13.   ##Device = Laptops, Desktops
  14.   ##Screen = B/w 1025px to 1280px
  15. */
  16.  
  17. @media (min-width: 1025px) and (max-width: 1280px) {
  18.  
  19.   //CSS
  20.  
  21. }
  22.  
  23. /*
  24.   ##Device = Tablets, Ipads (portrait)
  25.   ##Screen = B/w 768px to 1024px
  26. */
  27.  
  28. @media (min-width: 768px) and (max-width: 1024px) {
  29.  
  30.   //CSS
  31.  
  32. }
  33.  
  34. /*
  35.   ##Device = Tablets, Ipads (landscape)
  36.   ##Screen = B/w 768px to 1024px
  37. */
  38.  
  39. @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  40.  
  41.   //CSS
  42.  
  43. }
  44.  
  45. /*
  46.   ##Device = Low Resolution Tablets, Mobiles (Landscape)
  47.   ##Screen = B/w 481px to 767px
  48. */
  49.  
  50. @media (min-width: 481px) and (max-width: 767px) {
  51.  
  52.   //CSS
  53.  
  54. }
  55.  
  56. /*
  57.   ##Device = Most of the Smartphones Mobiles (Portrait)
  58.   ##Screen = B/w 320px to 479px
  59. */
  60.  
  61. @media (min-width: 320px) and (max-width: 480px) {
  62.  
  63.   //CSS
  64.  
  65. }
Add Comment
Please, Sign In to add comment