SHARE
TWEET

Untitled

a guest Aug 20th, 2019 57 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /**  media queries  **/
  2.  
  3. /*
  4.   ##Device = Desktops
  5.   ##Screen = 1281px to higher resolution desktops
  6. */
  7.  
  8. @mixin desktops-large {
  9.   @media (min-width: 1281px) {
  10.     @content;
  11.   }
  12. }
  13.  
  14. /*
  15.     ##Device = Laptops, Desktops
  16.     ##Screen = 1025px to higher resolution desktops and laptops
  17.   */
  18.  
  19. @mixin desktops-all {
  20.     @media (min-width: 1025px) {
  21.         @content;
  22.     }
  23. }
  24.  
  25. /*
  26.   ##Device = Laptops, Desktops
  27.   ##Screen = B/w 1025px to 1280px
  28. */
  29.  
  30. @mixin desktops {
  31.   @media (min-width: 1025px) and (max-width: 1280px) {
  32.     @content;
  33.   }
  34. }
  35.  
  36. /*
  37.   ##Device = Tablets, Ipads (portrait)
  38.   ##Screen = B/w 768px to 1024px
  39. */
  40.  
  41. @mixin tablets-portrait {
  42.   @media (min-width: 768px) and (max-width: 1024px) {
  43.     @content;
  44.   }
  45. }
  46.  
  47. /*
  48.   ##Device = Tablets, Ipads (landscape)
  49.   ##Screen = B/w 768px to 1024px
  50. */
  51.  
  52. @mixin tablets-landscape {
  53.     @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  54.         @content;
  55.     }
  56. }
  57.  
  58. /*
  59.   ##Device = Low Resolution Tablets, Mobiles (Landscape)
  60.   ##Screen = B/w 481px to 767px
  61. */
  62.  
  63. @mixin mobiles-landscape {
  64.   @media (min-width: 481px) and (max-width: 767px) {
  65.     @content;
  66.   }
  67. }
  68.  
  69. /*
  70.   ##Device = Most of the Smartphones Mobiles (Portrait)
  71.   ##Screen = B/w 320px to 479px
  72. */
  73. @mixin mobiles-portrait {
  74.   @media (min-width: 320px) and (max-width: 480px) {
  75.     @content;
  76.   }
  77. }
  78.  
  79. /*
  80.     ##Device = Most of the Smartphones Mobiles
  81.     ##Screen = B/w 320px to 767px
  82.   */
  83. @mixin mobiles-all {
  84.   @media (min-width: 320px) and (max-width: 767px) {
  85.     @content;
  86.   }
  87. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top