Урок 11. Примеры: адаптивные блоки

📁 Раздел: Раскладка ⏱️ Время изучения: ~50 мин 🎯 Сложность: Средняя

⚡ Кратко

Пять примеров: адаптивная секция, шапка с меню, карточка-контейнер, таблица на мобильном и адаптивная типографика. Меняйте ширину окна и смотрите.

1. Секция лендинга

Адаптивная секция

На мобильном блоки идут в столбик, на широком экране — в строку. Отступы и размер заголовка тоже растут. 

<section class="rounded-xl bg-slate-50 px-4 py-8 md:px-8 md:py-12">
  <div class="flex flex-col gap-6 md:flex-row md:items-center md:gap-10">
    <div class="flex-1">
      <h2 class="text-2xl font-semibold tracking-tight text-slate-900 md:text-3xl">Адаптивная секция</h2>
      <p class="mt-3 text-sm leading-relaxed text-slate-600 md:text-base">
        На мобильном блоки идут в столбик, на широком экране — в строку.
        Отступы и размер заголовка тоже растут.
      </p>
      <button class="mt-4 w-full rounded-md bg-slate-900 px-4 py-2 text-sm font-medium text-white md:w-auto">Начать</button>
    </div>
    <div class="h-32 flex-1 rounded-lg bg-linear-to-br from-sky-400 to-indigo-500"></div>
  </div>
</section>

Кнопка во всю ширину на мобильном (w-full) и по содержимому на десктопе (md:w-auto) — стандартный приём.

2. Шапка: меню прячется, кнопка остаётся

Логотип 
<header class="flex items-center justify-between rounded-lg border border-slate-200 bg-white px-4 py-3">
  <span class="text-sm font-semibold text-slate-900">Логотип</span>
  <nav class="hidden gap-6 text-sm text-slate-600 md:flex">
    <a class="hover:text-slate-900" href="#">Возможности</a>
    <a class="hover:text-slate-900" href="#">Цены</a>
    <a class="hover:text-slate-900" href="#">Блог</a>
  </nav>
  <div class="flex items-center gap-2">
    <button class="rounded-md bg-slate-900 px-3 py-1.5 text-sm text-white">Войти</button>
    <button class="rounded-md border border-slate-300 p-2 text-slate-600 md:hidden" aria-label="Меню">☰</button>
  </div>
</header>

3. Один компонент — два контекста

Статья о вёрстке

Контейнер широкий — картинка слева.

Статья о вёрстке

Контейнер узкий — картинка сверху.

<div class="grid gap-4 md:grid-cols-[1fr_240px]">
  <div class="@container rounded-lg border border-slate-200 bg-white p-4">
    <article class="flex flex-col gap-3 @sm:flex-row @sm:items-center">
      <div class="h-20 shrink-0 rounded-lg bg-slate-200 @sm:w-28"></div>
      <div>
        <h3 class="text-sm font-semibold text-slate-900">Статья о вёрстке</h3>
        <p class="mt-1 text-xs text-slate-600">Контейнер широкий — картинка слева.</p>
      </div>
    </article>
  </div>
  <div class="@container rounded-lg border border-slate-200 bg-white p-4">
    <article class="flex flex-col gap-3 @sm:flex-row @sm:items-center">
      <div class="h-20 shrink-0 rounded-lg bg-slate-200 @sm:w-28"></div>
      <div>
        <h3 class="text-sm font-semibold text-slate-900">Статья о вёрстке</h3>
        <p class="mt-1 text-xs text-slate-600">Контейнер узкий — картинка сверху.</p>
      </div>
    </article>
  </div>
</div>

4. Таблица на мобильном

Два подхода: прокрутка (проще) и превращение строк в карточки (удобнее).

ЗаказКлиентСтатусСумма
1042СмирноваГотово12 400
1043КовалёвОжидает8 900
 
<div class="space-y-4">
  <div class="overflow-x-auto rounded-lg border border-slate-200">
    <table class="w-max min-w-full text-sm">
      <thead class="bg-slate-50 text-xs text-slate-500">
        <tr><th class="px-4 py-2 text-left">Заказ</th><th class="px-4 py-2 text-left">Клиент</th><th class="px-4 py-2 text-left">Статус</th><th class="px-4 py-2 text-right">Сумма</th></tr>
      </thead>
      <tbody class="divide-y divide-slate-100 text-slate-700">
        <tr><td class="px-4 py-2">1042</td><td class="px-4 py-2">Смирнова</td><td class="px-4 py-2">Готово</td><td class="px-4 py-2 text-right tabular-nums">12 400</td></tr>
        <tr><td class="px-4 py-2">1043</td><td class="px-4 py-2">Ковалёв</td><td class="px-4 py-2">Ожидает</td><td class="px-4 py-2 text-right tabular-nums">8 900</td></tr>
      </tbody>
    </table>
  </div>
</div>

5. Адаптивная типографика без брейкпоинтов

Функция clamp() задаёт размер, который плавно меняется вместе с шириной окна — промежуточных ступеней не нужно.

Заголовок растёт плавно 

<h2 class="text-[clamp(1.5rem,4vw,2.5rem)] font-semibold tracking-tight text-slate-900">
  Заголовок растёт плавно
</h2>
<h2 class="text-[clamp(1.5rem,4vw,2.5rem)] font-semibold">Заголовок растёт плавно</h2>

Читается так: не меньше 1.5rem, желательно 4% ширины окна, не больше 2.5rem.