Javascript 如何在调整窗口大小时隐藏标题？

我有这个，在顶部有一个标题，我想隐藏在较小的设备上，最好在调整窗口大小时将其相应地隐藏。 现在我已经将其设置为仅在w大于450时显示，在加载导航栏时计算一次w，我还没有弄清楚如何在调整窗口大小时重新计算它，有没有更好的方法？我使用离子5和角离子

<ion-toolbar>
  
  <!-- Titel og link tilbake til hjemmeside -->
  <ion-button routerLink="/home" fill="clear" *ngIf="w > 450">
    <ion-title>Inventar System</ion-title>
  </ion-button>
  
  <!-- Vis tilbakeknapp hvist man ikke er på hjemmesiden -->
  <ion-buttons slot="start" *ngIf="!router.url.includes('/home')">
    <ion-back-button defaultHref="home"></ion-back-button>
  </ion-buttons>

  <!-- Vis bruker avatar, brukernavn og meny hvist bruker er logget inn -->
  <ion-item slot="end" *ngIf="loggedin">

    <!-- Proiflbilde -->
    <ion-avatar slot="start">
      <ion-img src="./assets/icon/defaultUserIcon.svg"></ion-img>
    </ion-avatar> 

    <!-- Brukernavn, åpner popover meny -->
    <ion-button (click)="openMenu($event)" fill="clear">
      <ion-label>{{username}}</ion-label>
    </ion-button>  
  </ion-item>

  <!-- Vis log in link hvist bruker ikke er logget inn -->
  <ion-item slot="end" *ngIf="!loggedin"> 
    <ion-button (click)="login()" fill="clear">
      <ion-label>Login</ion-label>
    </ion-button>  
  </ion-item>

</ion-toolbar>

divStyle={
显示：“内联块”//初始宽度
}
@HostListener（'窗口：调整大小'）
public detectResize（）：void{
this.customWidth=document.getElementById（'element'）.offsetWidth
//你在这里有魔法吗。。。
if（this.customWidth我最后只给标题一个id，tittel，并在宽度小于450时使用媒体查询将其隐藏

Html:

你为什么不使用CSS网格来隐藏它，而不需要观看屏幕的大小调整？@rabsom啊，这很聪明，我甚至没有想过在工具栏中使用网格谢谢！我最后只给出了一个id，并使用CSS媒体查询来隐藏它xd如果你想以角度的方式完成它，你可以使用上面的方法
import { PopoverComponent } from './../popover/popover.component';
import { PopoverController } from '@ionic/angular';
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.scss'],
})
export class NavbarComponent implements OnInit {
  public w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  constructor(private popCtrl: PopoverController, public router: Router) { 
   
  }

  ngOnInit() {}


  async openMenu(ev: any){
    const popover = await this.popCtrl.create({
      component: PopoverComponent,
      event: ev,
    });

    return await popover.present();
  }
  
}

divStyle = {
 display: "inline-block" //Initial width
}

@HostListener('window:resize')
public detectResize(): void {
     this.customWidth = document.getElementById('element').offsetWidth
     // Do you magic here ...
if(this.customWidth<=450){
     this.divStyle = {
     display: "none"
 }
 }
}

<div id="element" [ngStyle]="divStyle" #resizeDiv ></canvas>

 <ion-button routerLink="/home" fill="clear" id="tittel">
   <ion-title>Inventar System</ion-title>
 </ion-button>

#tittel{

}
@media only screen and (max-width: 450px) {
    #tittel{
        display: none;
    }
  }