А если ту же карточку нужно показать в узкой боковой колонке на широком экране? Окно широкое, контейнер узкий —
@media смотрит на размер окна и промахивается. Карточка снова вытянулась горизонтально, хотя места ей не хватает.Контейнерные запросы переключают акцент: элемент смотрит на размер своего контейнера. Один и тот же компонент в шапке, в колонке и в подвале адаптируется по-разному. И вам не нужно три разных вёрстки под три места.
В статье — пример с резиновой карточкой кроссовок и разбор
container-type. А ещё — именованные контейнеры для нескольких блоков на странице и cqw — новые единицы измерения от ширины контейнера. Chrome 105+, Safari 16+, Firefox 110+ — уже в baseline. #css #webdev📎 Читать статью