text 5个断点SASS媒体查询mixin。

Posted 2021-05-02

  <div class="box">
    Resize the window to watch me change!
  </div>
  
  /* Our Breakpoint sizes */
$xs-min-width: 320px;
$sm-min-width: 414px;
$md-min-width: 768px;
$lg-min-width: 1024px;
$xlg-min-width: 1280px;

/* Our mixins */
@mixin xs {
  @media (min-width: #{$xs-min-width}) and (max-width: #{$sm-min-width - 1px}) {
    @content;
  }
}

@mixin sm {
  @media (min-width: #{$sm-min-width}) and (max-width: #{$md-min-width - 1px}) {
    @content;
  }
}

@mixin md {
  @media (min-width: #{$md-min-width}) and (max-width: #{$lg-min-width - 1px}) {
    @content;
  }
}

@mixin lg {
  @media (min-width: #{$lg-min-width}) and (max-width: #{$xlg-min-width - 1px})  {
    @content;
  }
}

@mixin xlg {
  @media (min-width: #{$xlg-min-width}) {
    @content;
  }
}


/* Stylesheet */
body {
  margin: 3rem;
}

.box {
  display: inline-block;
  font-size: .75rem;
  padding: 1rem; /* mobile first */
  background: black; /* Mobile first */
  color: white;
  border-radius: 5px;
  transition: background 250ms ease-in;
  
  @include xs {
    background: purple; /* 320px to 413px */
  }
  
  @include sm {
    background: cornflowerblue; /* 413px to 767px */
    font-size: .812rem;
    padding: 1.25rem;
  }
  
  @include md {
    background: red; /* 768px to 1023px */
    font-size: .875rem;
    padding: 1.5rem;
  }
  
  @include lg {
    color: #333;
    background: yellow; /* 1024px  to 1279px */
    font-size: 1rem;
    padding: 1.75rem;
  }
  
   @include xlg {
    background: orange; /* 1280px and up */
     font-size: 1.25rem;
       padding: 2rem;
  }
}

body {
  height: 100vh;
  transition: background 250ms ease-in;
   @include xs {
    background: pink; 
  }
   @include sm {
    background: tomato; 
  }
  
  @include md{
    background: cyan; 
  }
  
  @include lg{
    background: purple; 
  }
  
  @include xlg{
    background: cornflowerblue; 
  }
}