Сначала мобильная версия

Сайты открывают на телефонах, планшетах и компьютерах, и ширина экранов у них сильно разная: у телефона около 375 пикселей, у планшета около 768, у компьютера 1280 и больше. Страница, которая подстраивает свой макет под ширину экрана, называется адаптивной. В этом уроке вы сделаете адаптивной главную страницу приюта.

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

Чтобы это увидеть, нужно менять ширину предпросмотра. На компьютере он занимает примерно треть окна, поэтому на большинстве ноутбуков он уже планшета. Для этого служит панель над предпросмотром — Ширина просмотра. Вы уже пользовались ею несколько раз, а в этом уроке она понадобится постоянно:

• По размеру показывает страницу в собственную ширину предпросмотра (число в скобках).
• 375 px показывает её шириной с экран телефона, 768 px — планшета, а 1280 px — компьютера.

При 768 или 1280 px страница сначала раскладывается в такую ширину, а потом уменьшается, чтобы поместиться в предпросмотр. Всё выглядит мельче, но макет получается точно такой, какой показал бы тот экран. Попробуйте все четыре кнопки и посмотрите на страницу при каждой ширине.

В CSS стили, предназначенные только для некоторых ширин, пишутся в медиазапросе: это правило @media, до которого в курсе CSS мы не дошли. Правила внутри него действуют, только когда условие в скобках выполняется, здесь — когда ширина страницы не меньше 48rem (768 px):

@media (width >= 48rem) {
	h1 {
		font-size: 3.75rem;
	}
}

(В старом коде то же условие записывают как (min-width: 48rem).)

В Tailwind медиазапросы самому писать не нужно. Перед классом ставится префикс, как hover: в предыдущем уроке. Префикс md: (от medium, «средний») применяет класс только начиная с 768 px. Это тоже вариант, но зависит он не от состояния, а от ширины экрана. Вот, в упрощённом виде, CSS, который Tailwind создаёт для md:text-6xl:

@media (width >= 48rem) {
	.md\:text-6xl {
		font-size: 3.75rem; /* 60 px */
		line-height: 1;
	}
}

Обратная косая черта в .md\:text-6xl нужна по той же причине, что и в .hover\:bg-orange-600 в предыдущем уроке: двоеточие — часть имени класса.

Класс без префикса действует при любой ширине. Поэтому страницы на Tailwind делают по принципу mobile first («сначала мобильные»): сначала оформляют страницу для телефона классами без префиксов, а затем добавляют классы с префиксами для того, что должно измениться на широких экранах. Например, text-4xl md:text-6xl — это заголовок в 36 пикселей, который помещается на телефоне, а начиная с 768 px — в 60 пикселей.

Частая ошибка: md: не значит «только на планшетах». Это значит «начиная с 768 px», так что класс действует и на компьютерах. А префикса для телефонов нет: то, что предназначено для телефонов, пишется без префикса.

И ещё одно, что нужно любой адаптивной странице. Мобильные браузеры ждут страниц, сделанных для компьютеров, поэтому раскладывают страницу так, будто экран шириной около 980 px, а потом уменьшают её. Текст получается крошечным, а классы с md: действуют даже на телефоне. Эта строка в head сообщает браузеру, что страница готова к любой ширине: раскладывать её нужно в реальную ширину экрана (width=device-width) и не увеличивать и не уменьшать масштаб (initial-scale=1):

<meta name="viewport" content="width=device-width, initial-scale=1">

Viewport — это часть окна браузера, в которой показана страница. Предпросмотр — не телефон, поэтому разницы вы здесь не увидите, но на настоящем телефоне странице без этой строки не обойтись.