Media Queries with Mixins

    Medidas
    • Em Media Queries, o rem e em utilizam o tamanho de fonte do browser, que por default é 16px, lembrando que o usuário pode altera-la.
    • Utilizaremos em pois em alguns browsers rem apresenta falha na conversão.
    • Visto que então 1em será 16px, para chegar em um width de 600px teremos 37.5em.

    Breakpoints
    • Criado o mixin de breakpoints:
      @mixin respond($breakpoint) {

      @if $breakpoint == phone{
         @media (max-width: 37.5em) { @content }; //600px
      }
      @if $breakpoint == tab-port{
         @media (max-width: 56.25em) { @content }; //900px
      }
      @if $breakpoint == tab-land{
         @media (max-width: 75em) { @content }; //1200px
      }
      @if $breakpoint == big-desktop{
         @media (min-width: 112.5em ) { @content }; //1800px
      }
      }

    _base.scss
    • Agora com os breakpoints definidos, vamos organizar o font-size.

    • Até aqui temos no html o font-size de 62.5%, sendo 62.5% de 16px.
      ** Lembrando que isso foi utilizado para podermos utilizar 1rem = 10px, facilitando os cálculos.
      ** O cálculo utilizado foi: 10px/16px = 62.5%.
      ** Utiliza-se 1.6rem para chegar em 16px.

    • Adequando o font-size para breakpoints:
      Agora, imaginamos que para o tab-land, queremos que 1rem seja 8px.
      ** Cálculo: 1 rem = 8px, portanto 8px/16px = 50%.
      Agora que temos 50% no tab-land, 1 rem equivale a 8px.
      Com isso, nosso btn principal que possui um padding de 4rem (40px no cálculo do font-size do html principal) vai ser 4rem = 8px e 8x4 = 32px.

    • Definição de font-size para os breakpoints:
      a) Nesse caso abaixo estamos utilizando max-width.
      b) Ao utilizar max-width, digamos que tenhamos uma tela de 700px. O browser pergunta se é menor que 1200px e aplica o tab-land. Após isso lê o código de baixo, verifica que é menor do que 900px e também aplica o tab-port.
      c) Visto termos um conflito, a última declaração será aplicada, portanto o tab-port. E por isso que temos essa ordem abaixo no exemplo.
      d) Caso fosse mobile-first, onde teriamos min-width, a ordem seria ao contrário.
      e) Exemplo:
      html {
        font-size: 62.5%; //1 rem = 10px; 10px/16px = 62.5%.

        @include respond(tab-land) { //pergunta: width < 1200?
          font-size: 56.25%; //1rem = 9 px, 9/16 = 56.25%
      }

        @include respond(tab-port) { //width < 900?
          font-size: 50%; //1rem = 8px, 8/16 = 50%.
      }

        @include respond(big-desktop) {
          font-size: 75%; //1rem = 12px, 12/16 = 75%
       }
      }