Как менять css-стили в зависимости от размера окна, но без использования медиа-запросов?

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

codepen.io/paulradzkov/pen/NNgVEO — вот пример.
https://medium.freecodecamp.com/the-fab-four-techn... — вот статья с описанием принципа работы.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
Blogman Оренбург
от 20 000 до 60 000 руб.
от 80 000 до 150 000 руб.
Faradise Москва
от 70 000 руб.
09 дек. 2018, в 21:57
1500 руб./за проект
09 дек. 2018, в 20:27
4000 руб./за проект