Introducimos el concepto de @mediaconsultas en CSS.
Mucho de lo que el uso de Sass en este proyecto nos permite hacer es permanecer SECOS (no lo repitas). Lo hicimos estableciendo variables de color y tamaño. Lo hicimos con nuestras pilas de fuentes. Ahora lo estamos haciendo de nuevo con las consultas de medios. Siempre que necesitemos una consulta de medios, ahora tenemos un @mixin que podemos usar. De esa manera, si necesitamos ajustarlos, podemos cambiarlos en un solo lugar.
En lugar de nombrar nuestras consultas de medios como "iPad" o algo demasiado específico como eso, usaremos algunos nombres arbitrarios pero comprensibles como "Baby Bear" y "Papa Bear".
Comenzamos con una pantalla ancha, luego la reducimos hasta que la navegación se ve mal, y ese es nuestro primer salto de consulta de medios. En ese punto, dividimos la navegación en dos filas de cuatro en lugar de una fila de ocho. Tenemos que ajustar las sombras para que se vea bien.
También ajustamos el ancho del ajuste de la página en determinadas consultas de medios, lo que significa que también debemos modificar el funcionamiento del logotipo.