Как менять css-стили в зависимости от размера окна, но без использования медиа-запросов?
Верстаю несложную страницу. Точнее даже не страницу а некий блок. Этот блок в качестве виджета будет встраиваться в сторонние сайты. Т.е. грубо говоря в какой-то, назовем его "сторонний контейнер", который может быть каким-угодно по ширине. И нужно добиться чтобы мой блок был адаптивным. Сами понимаете, что использование медиа-запросов (@media) отпадает, т.к. они учитывают размер экрана, а внешний вид моего блока должен зависеть не от размера экрана, а от размера внешнего контейнера. Можно было бы сделать блок просто резиновым, но этого недостаточно, т.к. есть некоторые элементы, которые должны менять внешний вид в зависимости от ширины блока. Как быть в такой ситуации? Я вижу только одно решение - использование js. Т.е. внутри js определяем размер стороннего контейнера, в который встроен наш блок, и создаем условия (фактически аналогично как это делается в css с медиа-запросами) и в зависимости от условия (ширины контейнера) применяем те или иные классы-модификаторы в дополнение к основным классам элементов блока. Вопрос к опытным фронтендерам - корректное ли это решение и есть ли еще какие варианты?
Vlad Tycky: ну, допустим я хочу при достижении какого-то значения ширины родительского блока изменить цвет какого-то элемента в моем блоке (чисто гипотетически). Вряд ли же тут подойдет то о чем вы пишите. Т.е. речь идет не только о сжатии блоков, перестроении и пр. Но еще и об изменениях стилей - размеры, шрифты и пр.
Дмитрий: Но посредством нехитрых рассуждений можно понять, что изменение шрифтов,цветов и т.д. не делается через CSS без media. Соответственно решение изменения стилей(цвета, шрифты) через JS более чем корректно, потому что оно единственное.
Есть техника эмуляции одного брейкпоинта через min-width, max-width и calc.
Этот «брейкпоинт» зависит от размеров контейнера, а не от ширины окна — идеально для виждетов.
Простой
