Build Out Responsive SCSS Mixins

[robpedersendev]

We need a site that is naturally responsive using these widths 320px — 480px: Mobile devices 481px — 768px: iPads, Tablets 769px — 1024px: Small screens, laptops 1025px — 1200px: Desktops, large screens 1201px and more —  Extra large screens, TV

Discord reference

@mixin respond($breakpoint) {
  @if $breakpoint == very-small {
    @media only screen and (max-width: 23.65em) {
      @content;
    } //380px
  }
  @if $breakpoint == small-phone {
    @media only screen and (max-width: 31.25em) {
      @content;
    } //400px
  }
  @if $breakpoint == phone {
    @media only screen and (max-width: 37.5em) {
      @content;
    } //600px
  }
  @if $breakpoint == tab-port {
    @media only screen and (max-width: 56.25em) {
      @content;
    } //900px
  }
  @if $breakpoint == tab-land {
    @media only screen and (max-width: 75em) {
      @content;
    } //1200px
  }
  @if $breakpoint == big-desktop {
    @media only screen and (min-width: 112.5em) {
      @content;
    } //1800
  }

  @if $breakpoint == very-big-desktop {
    @media only screen and (min-width: 156.25em) {
      @content;
    } //2500
  }
}

And use like this
  html {
  font-size: 62.5%; // 1rem = 10px

  @include respond(small-phone) {
    font-size: 20%;
  }

  @include respond(phone) {
    font-size: 40%;
  }

  @include respond(tab-land) {
    font-size: 56.25%; //1 rem = 9px
  }

  @include respond(tab-port) {
    font-size: 50%; //1 rem = 8px
  }

  @include respond(big-desktop) {
    font-size: 60%;
  }

  @include respond(very-big-desktop) {
    font-size: 80%;
  }
}

[robpedersendev]

Build Out Responsive SCSS Mixins