Question

有没有办法只在特定的视口宽度上应用特定的类？（除了使用媒体查询）

例如，<div class="mb-1>Hello world</div>会始终应用margin-bottom。

但是如果我只想在视口大于sm时才应用它呢？

我正在使用Angular，因此解决方案可以使用Angular助手。

Answer 1

不确定为什么您不想使用@media查询，我的意思是，这就是他们的目的所在。但是，如果必须使用替代方法，则可以使用JS / TS和@HostListener检测视口宽度以侦听resize事件，然后使用[ngClass]来应用该类。

类似的东西：

viewportWidth: number;

@HostListener('window:resize', ['$event'])
onResize(event) {
    this.viewportWidth = event.target.innerWidth;
}

viewportIsGreaterThan(viewportWidth: number): boolean {
    return this.viewportWidth > viewportWidth;
}

然后在你的模板中：

<div [ngClass]="{ 'mb-1' : viewportIsGreaterThan(499) }">Hello world</div>

Answer 2

大多数Bootstrap类也都有响应类。

在您的情况下，它将是mb-sm-1。

您可以在Bootstrap文档中找到所有组件的响应类。

Here例如您询问的间距实用程序的响应类。

根据Bootstrap中的视口宽度添加某个类

2 个答案: