Как лучше реализовать адаптивность в Vue, React и Angular?
Исхожу из того, что компонент в популярных фреймворках самодостаточен и является "черным ящиком", т. е. имеет интерфейс в виде получаемых параметров и возвращает события. Поскольку компонент "не знает", где и как располагается на странице, то указывать в стилях компонента media query как то неправильно. У Vue ест несколько решений, но они основываются на JavaScript, из-за чего при серверном рендеринге и последующей гидратации на клиенте происходят несостыковки - на сервере же нет размеров экрана, поэтому показывается вариант "по-умолчанию".
Или же, исходя из размеров экрана, нужно показывать либо один компонент, либо другой. Поскольку в указанных фреймворках это, к счастью, достигается не установкой display: none и display: block, а добавлением/удалением соответствующих компонентов в/из DOM, то так же при SSR и гидратации данных в браузере могут происходить те же несостыковки.
Ну, т. е. как обычно - на глобальных классах?
Просто у того же Vue есть scoped-стили, и в связи с этим сразу появляется желание прекратить загрязнять общие стили, а писать свои под каждый компонент.
Да и опять же решения типа bootstrap в общем основаны на скрытии/показе разных блоков (при различных разрешениях) при помощи display и пр., а javascript-фреймворки оперируют DOM, т. е. не скрывают элемент, а удаляют, и из-за этого рендеринг на сервере может отличаться от рендеринга в браузере.
Простой
