#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'ом.
