Мы представляем концепцию @mediaзапросов в CSS.
Многое из того, что позволяет нам использовать Sass в этом проекте, - это оставаться СУХИМИ (не повторяться). Мы сделали это, установив переменные цвета и размера. Мы сделали это с нашими наборами шрифтов. Теперь мы делаем это снова с медиа-запросами. Каждый раз, когда нам нужен медиа-запрос, теперь у нас есть @mixin, который мы можем использовать. Таким образом, если нам нужно отрегулировать их, мы можем изменить их только в одном месте.
Вместо того, чтобы называть наши медиа-запросы такими, как «iPad» или что-то слишком конкретное, мы просто будем использовать произвольные, но понятные имена, такие как «Медвежонок» и «Папа Медведь».
Мы начинаем с широкого экрана, затем сужаем его до тех пор, пока навигация не станет плохой, и это наш первый разрыв медиа-запроса. В этот момент мы разбиваем навигацию на две строки по четыре вместо одной строки из восьми. Нам нужно настроить тени, чтобы все выглядело правильно.
Мы также настраиваем ширину обтекания страницы при определенных медиа-запросах, а это значит, что нам нужно настроить работу логотипа.