Стили, зависящие от размера

Обзор

Стилизация с учетом размера позволяет компонентам менять макет или внешний вид в зависимости от доступного им пространства, а не от размера всего экрана. Это полезно для таких компонентов, как карточки или панели навигации, которые могут быть размещены в разных частях макета (например, на узкой боковой панели или в широкой основной области).

Рекомендуется использовать запросы контейнеров, поскольку они делают компоненты по-настоящему модульными. Вам не нужно знать, где будет находиться компонент, или писать сложные медиа-запросы для обработки каждого возможного макета.

Реализация

1. Определите контейнер

ОБЯЗАТЕЛЬНО. Сначала нужно указать браузеру, какой элемент является контейнером, который нужно измерить.

.card-container {
  /* Define the container type. Use 'inline-size' for width-based queries. */
  /* You can also use 'size' for both width and height, but it requires explicit sizing. */
  container-type: inline-size;
}

2. Как применять стили в зависимости от размера контейнера

Используйте правило @container, чтобы применять стили, когда контейнер достигает определенного размера.

/* Default styles for small containers (stacked layout) */
.card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Styles for larger containers (side-by-side layout) */
/* This triggers when the container is wider than 400px */
@container (min-width: 400px) {
  .card {
    flex-direction: row;
    align-items: center;
  }
  
  .card-image {
    width: 150px;
    height: 150px;
  }
}

3. Как показывать контент при определенных условиях

Вы также можете использовать запросы контейнеров, чтобы скрывать или показывать дополнительные сведения, когда места больше.

.card-details {
  /* Hide extra details by default in small spaces */
  display: none;
}

@container (min-width: 600px) {
  .card-details {
    /* Show details when there is plenty of room */
    display: block;
  }
}

Резервные стратегии

Для браузеров, которые не поддерживают запросы контейнеров, лучше всего использовать безопасный макет по умолчанию (например, вертикальный макет с накоплением) и постепенно улучшать его с помощью медиазапросов, если это позволяет общий размер экрана.

/* Default safe stacked layout */
.card {
  display: flex;
  flex-direction: column;
}

/* Fallback using media queries for older browsers */
@media (min-width: 600px) {
  .card {
    flex-direction: row;
  }
}

/* Overwrite with container queries where supported */
@supports (container-type: inline-size) {
  @media (min-width: 600px) {
    .card {
      /* Reset media query fallback if needed, or let container query handle it */
      flex-direction: column;
    }
  }
  
  @container (min-width: 400px) {
    .card {
      flex-direction: row;
    }
  }
}

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