阅读数:71 评论数:0

$breakpoints: (
  'phone': (320px,480px),
  'pad': (481px,760px),
  'notebook': (761px,1024px),
  'desktop':(1025px,1200px),
  'tv': 1201px,
);

@mixin respond-to($breakname) {
  $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;
    }
  }
}

.header {
  @include respond-to('notepad') {
      height: 10px;
  }
}