Сайты сверстанные под компьютеры странно смотрятся на телефонах и планшетах. Для того чтобы этого не было используют адаптивную верстку сайтов. Адаптивная верстка позволяет просматривать сайт на устройствах с различными размерами экранов.
Для создания адаптивного сайта будем использовать медиазапросы (@media).
На одном сайте можно использовать несколько медиазапросов. Это позволяет настроить сайт под разные экраны более детально.
Мы тоже будем использовать несколько медиазапросов.
Если уменьшать ширину браузера, то при достижении ширины менее 888 пикселей пункты меню начинают съезжать. При дальнейшем уменьшении ширины контакты в шапке наезжают на меню при 746 пикселей. Поэтому создадим два медиазапроса. Первый медиазапрос для меню и для всего остального:
А второй для шапки: