scss 用于响应媒体查询的Mixins

Posted 2021-05-18

@mixin vp-min($viewport) {
  @media screen and (min-width: $viewport) {
    @content;
  }
}

@mixin vp-max($viewport) {
  @media screen and (max-width: $viewport) {
    @content;
  }
}

@mixin vp-min-max($v-min, $v-max) {
  @media screen and (min-width: $v-min) and (max-width: $v-max) {
    @content;
  }
}

@mixin device($media) {
  @if $media == "tablet" {
    @media screen and (max-width: 1024px) {
      @content;
    }
  }
  @if $media == "tablet-portrait" {
    @media screen and (max-width: 800px) {
      @content;
    }
  }
  @if $media == "mobile" {
    @media screen and (max-width: 720px) {
      @content;
    }
  }
  @if $media == "mobile-portrait" {
    @media screen and (max-width: 400px) and (orientation: portrait) {
      @content;
    }
  }
}

// Layout widths
$bp-full: 1200px;
$bp-landscape: 1024px;
$bp-mobile: 767px;
$bp-portrait: 768px;
$bp-wide: 1400px;
$container-width: 1060px;

// Breakpoints
@mixin bp($point) {
  @if $point == wide {
    @media (max-width: $bp-wide) { @content; }
  }
  @else if $point == full {
    @media (max-width: $bp-full) { @content; }
  }
  @else if $point == landscape {
    @media (max-width: $bp-landscape) { @content; }
  }
  @else if $point == portrait {
    @media (max-width: $bp-portrait) { @content; }
  }
  @else if $point == mobile {
    @media (max-width: $bp-mobile)  { @content; }
  }
}

@mixin bp-min($viewport) {
  @media screen and (min-width: $viewport) {
    @content;
  }
}

@mixin bp-max($viewport) {
  @media screen and (max-width: $viewport) {
    @content;
  }
}