//https://blog.csdn.net/m0_46219714/article/details/132940786
$breakpoints: (
        "phone": (320px, 480px),
        "pad": (481px, 768px),
        "notebook": (769px, 1024px),
        "pc": (1025px, 1200px),
        "tv": 1201px,
);

@mixin respondTo($breakNames) {
  @if type-of($breakNames) == "list" {
    @each $breakName in $breakNames {
      $bp: map-get($breakpoints, $breakName);
      @if type-of($bp) == "list" {
        $min: nth($bp, 1);
        $max: nth($bp, 2);
        @media (min-width: $min) and (max-width: $max) {
          @content;
        }
      } @else {
        @media (min-width: $bp) {
          @content;
        }
      }
    }
  } @else {
    $bp: map-get($breakpoints, $breakNames);
    @if type-of($bp) == "list" {
      $min: nth($bp, 1);
      $max: nth($bp, 2);
      @media (min-width: $min) and (max-width: $max) {
        @content;
      }
    } @else {
      @media (min-width: $bp) {
        @content;
      }
    }
  }
}

.header {
   display: flex;
   width: 100%;
   background-color: pink;
   @include respondTo("phone") {
       height: 50px;
   }
   @include respondTo(['pad','phone']) {
       width: 25%;
   }
}