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