Адаптивный дизайн

Обзор

Каждый служебный класс в Tailwind можно условно применять в разных контрольных точках, что упрощает создание сложных адаптивных интерфейсов, не покидая своего HTML.

Сначала убедитесь, что вы добавили метатег области просмотра в <head> вашего документа:

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

Затем, чтобы добавить утилиту, но чтобы она вступила в силу только в определенной контрольной точке, все, что вам нужно сделать, это поставить перед утилитой имя контрольной точки, за которым следует символ ::

<!-- Ширина по умолчанию 16, 32 на средних экранах и 48 на больших экранах -->
<img class="w-16 md:w-32 lg:w-48" src="...">

По умолчанию существует пять контрольных точек, основанных на распространенных разрешениях устройств:

Префикс контрольной точки	Минимальная ширина	CSS
`sm`	640px	`@media (min-width: 640px) { ... }`
`md`	768px	`@media (min-width: 768px) { ... }`
`lg`	1024px	`@media (min-width: 1024px) { ... }`
`xl`	1280px	`@media (min-width: 1280px) { ... }`
`2xl`	1536px	`@media (min-width: 1536px) { ... }`

Это работает для каждого служебного класса в фреймворке, а это означает, что вы можете изменить буквально что угодно в данной контрольной точке — даже такие вещи, как расстояние между буквами или стили курсора.

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

<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
  <div class="md:flex">
    <div class="md:shrink-0">
      <img class="h-48 w-full object-cover md:h-full md:w-48" src="/img/building.jpg" alt="Modern building architecture">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Отступления компании</div>
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">Невероятные условия для вашей команды</a>
      <p class="mt-2 text-slate-500">Хотите взять свою команду на уединение, чтобы насладиться вкусной едой и понежиться на солнышке? У нас есть список мест, где это можно сделать.</p>
    </div>
  </div>
</div>

Вот как работает приведенный выше пример:

По умолчанию внешний div - это display: block, но при добавлении утилиты md:flex он становится display: flex на средних и больших экранах.
Когда родительский элемент является гибким контейнером, мы хотим убедиться, что изображение никогда не сжимается, поэтому мы добавили md:shrink-0, чтобы предотвратить сжатие на средних и больших экранах. Технически мы могли бы просто использовать shrink-0, так как он ничего не сделает на экранах меньшего размера, но поскольку это имеет значение только на экранах md, неплохо было бы четко указать это в имени класса.
На маленьких экранах по умолчанию изображение автоматически становится полноширинным. На средних экранах и выше мы ограничили ширину фиксированным размером и обеспечили полную высоту изображения с помощью md:h-full md:w-48.

В этом примере мы использовали только одну контрольную точку, но вы можете легко настроить этот компонент для других размеров, используя префиксы реагирования sm, lg, xl или 2xl.

Работа в первую очередь с мобильными устройствами

По умолчанию Tailwind использует систему контрольных точек для мобильных устройств, аналогичную той, к которой вы могли привыкнуть в других фреймворках, таких как Bootstrap.

Это означает, что служебные программы без префиксов (например, uppercase) действуют на всех размерах экрана, в то время как служебные программы с префиксом (например, md:uppercase) действуют только в указанной контрольной точке и выше.

Ориентация на мобильные экраны

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

Не используйте sm: для таргетинга мобильных устройств

<!-- Это будет центрировать текст только на экранах 640 пикселей и шире, но не на маленьких экранах -->
<div class="sm:text-center"></div>

Используйте утилиты без префиксов для таргетинга мобильных устройств и переопределяйте их при больших контрольных точках

<!-- Это позволит центрировать текст на мобильном устройстве и выровнять его по левому краю на экранах 640 пикселей и шире -->
<div class="text-center sm:text-left"></div>

По этой причине часто бывает хорошей идеей сначала реализовать мобильный макет для дизайна, а затем наслоить любые изменения, которые имеют смысл для экранов sm, затем экранов md и т.д.

Ориентация на диапазон контрольных точек

По умолчанию стили, применяемые с помощью таких правил, как md:flex, будут применяться в этой контрольной точке и останутся примененными в более крупных контрольных точках.

Если вы хотите применить утилиту только, когда активен определенный диапазон контрольных точек, сложите модификатор отзывчивости, такой как md , с модификатором max-*, чтобы ограничить этот стиль определенным диапазоном:

<div class="md:max-xl:flex">
  <!-- ... -->
</div>

Tailwind генерирует соответствующий модификатор max-* для каждой контрольной точки, поэтому из коробки доступны следующие модификаторы:

Модификатор	Медиа-запрос
`max-sm`	`@media not all and (min-width: 640px) { ... }`
`max-md`	`@media not all and (min-width: 768px) { ... }`
`max-lg`	`@media not all and (min-width: 1024px) { ... }`
`max-xl`	`@media not all and (min-width: 1280px) { ... }`
`max-2xl`	`@media not all and (min-width: 1536px) { ... }`

Ориентация на одну контрольную точку

Чтобы настроить таргетинг на одну контрольную точку, выберите диапазон для этой контрольной точки, объединив адаптивный модификатор, такой как md, с модификатором max-* для следующей контрольной точки:

<div class="md:max-lg:flex">
  <!-- ... -->
</div>

Прочтите о нацеливании на диапазоны контрольных точек, чтобы узнать больше.

Использование пользовательских контрольных точек

Настройка вашей темы

Вы можете полностью настроить контрольные точки в файле tailwind.config.js:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'tablet': '640px',
      // => @media (min-width: 640px) { ... }

      'laptop': '1024px',
      // => @media (min-width: 1024px) { ... }

      'desktop': '1280px',
      // => @media (min-width: 1280px) { ... }
    },
  }
}

Узнайте больше в документации по настройке контрольных точек.

Произвольные значения

Если вам нужно использовать одноразовую контрольную точку, которую не имеет смысла включать в вашу тему, используйте модификаторы min или max, чтобы сгенерировать пользовательскую контрольную точку на лету, используя любое произвольное значение.

<div class="min-[320px]:text-center max-[600px]:bg-sky-300">
  <!-- ... -->
</div>

Узнайте больше о поддержке произвольных значений в документации по произвольным значениям.

На этой странице