Итоги

В этом уроке вы сделали главную страницу приюта адаптивной и узнали, что:

• Адаптивная страница подстраивает макет под ширину экрана. На панели над предпросмотром страницу можно увидеть шириной с телефон (375 px), планшет (768 px) или компьютер (1280 px).
• Любой адаптивной странице нужна строка <meta name="viewport" content="width=device-width, initial-scale=1"> в head. Без неё телефоны раскладывают страницу так, будто их экран шириной около 980 px.
• В CSS стили для определённых ширин пишутся в медиазапросе: @media (width >= 48rem) { ... }. В Tailwind вместо этого перед классом ставят префикс: md:text-6xl.
• Класс без префикса действует при любой ширине, а класс с префиксом — начиная со своей контрольной точки: sm: с 640 px, md: с 768 px, lg: с 1024 px, xl: с 1280 px и 2xl: с 1536 px.
• Mobile first: оформите страницу для телефона классами без префиксов, а затем добавьте классы с префиксами для того, что меняется на широких экранах.
• У одного элемента могут быть классы для нескольких контрольных точек, например grid-cols-1 sm:grid-cols-2 lg:grid-cols-4. Если действуют сразу несколько, побеждает класс для самого широкого экрана.
• flex-col md:flex-row ставит элементы друг под другом на телефоне и рядом, начиная с 768 px.
• hidden md:flex показывает элемент только начиная с 768 px, а md:hidden — только при ширине меньше 768 px.
• Отступы и размеры текста тоже могут меняться вместе с шириной: py-12 md:py-24, text-4xl md:text-6xl.
• mx-auto max-w-5xl на элементе с содержимым не даёт ему расползаться на широком экране, а фон раздела по-прежнему занимает всю ширину.

Дальше вас ждёт ещё один небольшой проект: сайт кошачьего кафе, с состояниями и макетом для каждого экрана. А потом в уроке «Тёмная тема» вы дадите сайту приюта тёмные цвета для всех, кто их предпочитает, и кнопку, которая переключает светлый и тёмный вид.

Для практики вот новая часть сайта: подвал побольше, с названием приюта, адресом и кнопкой «Пожертвовать». Как и главная страница в начале этого урока, он сверстан только для компьютера: на телефоне три его колонки сдавлены в ряд.