使用Angular 8无法识别媒体查询

@media screen and (max-width: 768px) {
  /* 在屏幕宽度小于等于768px时应用的样式 */
  /* 可以在这里定义针对小屏幕设备的样式 */
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  /* 在屏幕宽度在769px和1024px之间时应用的样式 */
  /* 可以在这里定义针对中等屏幕设备的样式 */
}

@media screen and (min-width: 1025px) {
  /* 在屏幕宽度大于等于1025px时应用的样式 */
  /* 可以在这里定义针对大屏幕设备的样式 */
}

<div [ngClass]="{'small-screen': isSmallScreen, 'medium-screen': isMediumScreen, 'large-screen': isLargeScreen}">
  <!-- 根据屏幕尺寸应用不同的样式 -->
</div>

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  isSmallScreen: boolean;
  isMediumScreen: boolean;
  isLargeScreen: boolean;

  @HostListener('window:resize', ['$event'])
  onResize(event) {
    const screenWidth = event.target.innerWidth;
    this.isSmallScreen = screenWidth <= 768;
    this.isMediumScreen = screenWidth > 768 && screenWidth <= 1024;
    this.isLargeScreen = screenWidth > 1024;
  }
}