scss SCSS响应断点

Posted 2021-05-17

@mixin phone {
  @media (max-width: 320px) { @content; }
}
@mixin tablet {
  @media (min-width: 600px) { @content; }
}
@mixin tablet-landscape {
  @media (min-width: 900px) { @content; }
}
@mixin desktop {
  @media (min-width: 1200px) { @content; }
}
@mixin desktop-large {
  @media (min-width: 1800px) { @content; }
}

@import 'breakpoints';

#app {
  @include phone { /* Style for smartphones. */}
  @include tablet { /* Style for tablets. */}
  @include tablet-landscape { /* More width than a tablet in portrait mode. */}
  @include desktop { /* Things available only for desktop users. */}
  @include desktop-large { /* To display fancy styles to large-desktop users. */}
}