Angular6 -如何根据移动设备和浏览器改变.css类的宽度

<div [ngClass]="{'mobile-width': isMobile, 'desktop-width': !isMobile}" [ngStyle]="{'width.px': width}">
  <!-- 内容 -->
</div>

import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {
  isMobile: boolean;
  width: number;

  constructor() {
    this.isMobile = false;
    this.width = 100;
  }

  @HostListener('window:resize', ['$event'])
  onResize(event: any) {
    this.updateWidth();
  }

  private updateWidth() {
    this.isMobile = window.innerWidth < 768; // 根据需要设置移动设备的宽度阈值
    this.width = this.isMobile ? 200 : 500; // 根据需要设置移动设备和桌面设备的宽度
  }
}