Apresentamos o conceito de @mediaconsultas em CSS.
Muito do que usar o Sass neste projeto nos permite fazer é permanecer DRY (não se repita). Fizemos essa configuração de variáveis de cor e tamanho. Fizemos isso com nossas pilhas de fontes. Agora estamos fazendo isso de novo com consultas de mídia. Sempre que precisarmos de uma consulta de mídia, agora temos um @mixin que podemos usar. Dessa forma, se precisarmos ajustá-los, podemos alterá-los em apenas um lugar.
Em vez de nomear nossas buscas de mídia como “iPad” ou qualquer coisa muito específica assim, usaremos apenas alguns nomes arbitrários, mas compreensíveis, como “Baby Bear” e “Papa Bear”.
Começamos com uma tela ampla e a restringimos até que a navegação pareça ruim, e essa é nossa primeira quebra de consulta de mídia. Nesse ponto, dividimos a navegação em duas linhas de quatro em vez de uma linha de oito. Temos que ajustar as sombras para que pareça certo.
Também ajustamos a largura da quebra de página em certas consultas de mídia, o que significa que também precisamos ajustar a forma como o logotipo funciona.
