css - 具有响应式内容设计的黄金布局

Question

我正在使用 Golden-layout在我的 Angular 7 应用程序中将一些组件显示为小部件网格中的小部件。所有小部件都可以调整大小。例如，我需要在调整小部件大小时增加或缩小 font-size 。

我尝试将 vw 用于不正常的内容和调整窗口大小时常用的其他内容。但它不起作用，因为它取决于视口(viewport)，而我的视口(viewport)仍然相同，只是改变了小部件的大小。

是否有任何选项可以使小部件内的内容具有响应性？

这是关于 stackblitz 的示例(不是我的)- https://stackblitz.com/edit/angular-4aughc

Answer 1

在 golden-layout 中，您可以监听容器的 resize 事件，然后在触发后应用您想要的任何更改。

export class MyComponent {

    constructor(@Inject("Container") public container: Container) { 
        container.on('resize', () => {
            this.resize();
        });
    }

    resize() {
        if ($('.my-component').width() < 500) {
            $('.my-component').addClass('smallText');
        } else {
            $('.my-component').removeClass('smallText');
        }
    }

}

这将允许您根据父容器大小而不是窗口大小来执行操作。