На любом экране
И наконец, раскладка для любого экрана. Страница сделана по принципу mobile first (сначала для телефонов), и мы добавили в неё два элемента, которым нужна разная раскладка на телефоне и на компьютере:
- В шапке теперь есть ссылки на части страницы и кнопка «Меню». На телефоне места хватает только на логотип и кнопку «Меню». Начиная с 768 px вместо кнопки в ряд встают ссылки с промежутком 24 px, а кнопка «Меню» пропадает.
- В конце страницы — фотографии котов кафе. Они квадратные, не сплюснутые, с промежутком 16 px, и вместе занимают всю ширину страницы: на телефоне по две в ряду, а начиная с 768 px — все четыре в одном ряду.
На телефоне
От 768 px
Переключайте ширину 375, 768 и 1280 px в панели Ширина просмотра, чтобы увидеть обе раскладки. Проверки смотрят на раскладку для той ширины, которая стоит в просмотре в момент запуска, и проверяют, что ваши классы меняют её на брейкпоинте.
Вот и вся страница. Сайт кафе легко читать, он реагирует на действия посетителей и одинаково хорошо работает и на телефоне, и на компьютере. В следующем уроке, «Тёмная тема», вы сделаете сайт тёмным для всех, кто предпочитает тёмные цвета.