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

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

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

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

Войти через центр авторизации
Похожие вопросы