Как я могу использовать адаптивные классы пользовательского интерфейса, основанные на угловых сигналах, которые автомати ⇐ CSS

[Anonymous]

Код: Выделить всё

//Approach 1:
dynamicWidthClass = computed(()=>{
if (window.innerWidth > 992 && window.innerWidth  1284 && window.innerWidth = 1920) {
return "pl-5";
}
return "pl-3"
});
windowInnerWidth = signal(window.innerWidth)

//Approach 2:
dynamicWidthClass = signal("pl-3");

@HostListener("window:resize", ["$event"])
onResize(event) {
if (window.innerWidth > 992 && window.innerWidth  1284 && window.innerWidth = 1920) {
this.dynamicWidthClass.set("pl-5");
}
}

class="wrapper d-flex flex-column flex-row-fluid vh-100"
id="kt_wrapper"
>

У меня есть следующие два подхода в качестве примера фрагмента стиля, который я собираюсь использовать, чтобы сделать элементы маршрута Angular, вложенные в родительский компонент, более отзывчивыми в зависимости от изменений ширины области просмотра, какой подход может подойти мне лучше? В настоящее время я заметил, что оба подхода работают по-разному, но у обоих есть одна общая черта: они требуют перезагрузки при каждом изменении размера области просмотра.
Я делаю это неправильно, и мне нужно только полагаться на медиа-запросы CSS или какой-то другой подход? Основная проблема, с которой я здесь сталкиваюсь, заключается в том, что мой текущий проект в основном основан на Bootstrap, который загружен сумасшедшим количеством классов, которые трудно отследить, если я собираюсь персонализировать его под свои собственные, поэтому я пытаюсь реализовать более надежный подход, позволяющий сделать мой код отзывчивым без использования пользовательских классов или удаления начальной загрузки

Подробнее здесь: https://stackoverflow.com/questions/791 ... auto-adjus