CSS -контейнер запросов: революционизация отзывчивого дизайна

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

Контейнерные запросы Vs. Viewport Media Queries

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

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

Примечание. Поддержка широких браузеров для контейнерных запросов существует с момента Firefox 110. Полифиллы доступны для более старых браузеров.

определяющие контейнерные запросы

для использования контейнерных запросов сначала объявьте элемент как контейнер с использованием свойства контейнер-тип . inline-size (эквивалент ширине в горизонтальных режимах письма) является наиболее распространенным и широко поддерживаемым значением:

.container {
  container-type: inline-size;
}

Далее используйте @container at-rule, чтобы определить запрос. В следующем примере устанавливает цвет H2 синий, когда его контейнер имеет ширину 40ch или больше:

@container (min-width: 40ch) {
  h2 {
    color: blue;
  }
}

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

@container (inline-size > 40ch) {
  h2 {
    color: blue;
  }
}

Beyond inline-size , параметры включите block-size и аспект-Ratio . Проконсультируйтесь с официальной спецификацией для получения более подробной информации.

без вопросов контейнера вариации карт обычно включают классы модификатора, привязанные к точкам просмотра Viewport. Изображение ниже демонстрирует три размера карт и их соответствующие классы. ]

[Codepen Demo: Viewport Media Cards] (ссылка на CodePen) ]

]

350px или больше: горизонтальный макет

600px или больше: изображение как фон
• ]
]

[DEMO CODEPEN: Контейнерные запросы для карт] (ссылка на CodePen) ]

развязать мощность CSS: расширенные методы для адаптивных пользовательских интерфейсов

key takeaways:

] ] контейнерные запросы предлагают отзывчивость на уровне компонентов.

они определены с помощью
• контейнер-тип
и
• @container . ] логические свойства улучшают совместимость режима перекрестного написания.
они обеспечивают более гибкий и детальный подход к адаптивному дизайну, чем Media Posts Media Запросы.
• ]
]
(примечание: заменить "ссылку на Codepen" на фактические ссылки Codepen, если доступны.)

]