4

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

alt text

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

alt text

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

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

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

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

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

alt text

alt text

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

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

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

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

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

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

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

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

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

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

2 ответа 2

2

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

0

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

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.