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

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

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

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

Войти через центр авторизации
Похожие вопросы
Sveak Барнаул
от 50 000 руб.
Монографик Москва
от 60 000 до 100 000 руб.
Panda Media Нижний Новгород
от 35 000 руб.
19 нояб. 2019, в 10:42
3000 руб./за проект
19 нояб. 2019, в 10:04
1000 руб./в час
19 нояб. 2019, в 09:42
20000 руб./за проект