Question

我想根据屏幕尺寸来更改班级风格

<p [ngStyle]="{'color': isMobile() ? 'red' : 'blue'}">Lorem Ipsum</p>

这段代码正在调用我的component.ts中的方法

 isMobile() {      
    return window.innerWidth < 640;
 }

但是从我看到的情况来看，仅在单击窗口中的某个位置（而不是调整大小）时才调用此函数。我该如何立即实现？

Answer 1

您可以使用下面的媒体查询（Sass）：

.color-size {
  color: blue;
  @media screen and (max-width: 640px) {
    color: red;
  }
}

或纯CSS：

.color-size {
  color: blue;
}
@media screen and (max-width: 640px) {
  .color-size {
    color: red;
  }
}

如果您想通过ts中的事件来做到这一点：

  isMobile: boolean;
  @HostListener('window:resize', ['$event'])
  onResize(event) {
    if (event.target.innerWidth < 640) {
      this.isMobile = true;
    } else {
      this.isMobile = false;
    }
  }

和模板将是：

<p (window:resize)="onResize($event)" [ngStyle]="{ color: isMobile ? 'red' : 'blue' }">Lorem Ipsum</p>

动态变化的风格

1 个答案: