Медиа-запрос или аналог относительно родителя, а не вьюпорта или экрана

#media_queries #html #адаптивная_верстка #css #вёрстка

Имеется вот такой блок:



Хотелось бы сделать так, чтобы при достаточности ширины он трансформировался в такой
блок:



Как писать свойства - понятно: заменить инлайн-блоки на блоки, добавить отступы и т.д.

С запросами, на первый взгляд, тоже понятно. Пишем что-то типа:

.selector {
    свойства для телефонов
}

@media screen and (min-width: 768px) {
    .selector {
        свойства для планшетов и десктов
    }    
}


Но как быть в случае, если этот блок встречается на разных страницах и в одном случае
брейкпойнтом должно быть 768px, а в другом 1024px, например? Например, на одной странице
есть сайдбар, уменьшающий пространство, а на другой нету.





Получается, что этот запрос нужно делать относительно родителя. Если, например, родитель
400+ пикселей, то применяем свойства выстраивающие элементы блока колонками.

Медиазапрос должен выглядеть как-то так:

@media (ширина контекста: 480px) { ... }


Подскажите, пожалуйста, есть ли возможность организовать медиазапросы таким образом?

Другими слова: я вижу, что этот блок должен трансформироваться, если есть свободных
400px, но как мне определить, что ширина родителя 400+? Медиазапросом я могу определить
только ширину вьюпорта или экрана и она не всягда связана с шириной родителя.

Я пока что вижу два варианта:

а) На разных страницах проставлять нашему блоку разные классы, например

@media screen and (min-width: 768px) {
    .selector_unfold-on768 { ... }
}
@media screen and (min-width: 1024px) {
    .selector_unfold-on1024 { ... }
}


Но тогда придется дублировать одни и теже свойства (ну или убирать в миксины и инклюдить).

б) отказаться от медиа-запросов как таковых и пасть JS`ом.
    

Ответы

Ответ 1

Верно мыслите, тут либо через классы либо JS, ибо медиа запросы не умеют работать
с DOM элементами


Ответ 2

Подозреваю, что такое можно сделать с помощью flexbox.

Media-запросы работают только с viewport'ом.