如何爲Ionic Framework中動態更新的不同屏幕尺寸設置不同的字體大小？

Question

在響應文本屬性下的Ionic 3的CSS實用工具部分，我找不到任何關於此的信息。

我瞭解到，我們可以針對特定的屏幕尺寸居中對齊文本：

<div [attr.text-center]="isMD ? '' : null">I will be centered when isMD is true.</div> 

但我們不能ngClass使用isMD如因某種原因isMD evaluates to true無論屏幕大小。

<div [ngClass]="{'font-lg': isMD}">I'm visible on all screens.</div> 

我們也有Platform可在我們的離子的應用程序，所以我可以做這樣的事情

我想：

screenIsSM: boolean = this.platform.width() <= 576; 
screenIsMD: boolean = this.platform.width() > 576 && this.platform.width() <= 768; 
screenIsLG: boolean = this.platform.width() > 768 && this.platform.width() <= 992; 
screenIsXL: boolean = this.platform.width() > 992 && this.platform.width() <= 1200; 

，並試圖用它作爲：

<span [ngClass]="{ 
    'font-sm' : screenIsSM, 
    'font-md' : screenIsMD, 
    'font-lg' : screenIsLG, 
    'font-xl' : screenIsXL 
}">Test</span> 

由於某種原因沒有任何反應但是，如果我做

{{ screenIsSM ? 'SMALL SCREEN' : 'BIGGER SCREENS' }} 

它不給我想要的結果，但是這似乎在頁面加載時，工作只有一次，不會在屏幕尺寸動態變化做出反應。什麼是正確的方法？

Answer 1

你可以在你的構造函數中使用resize事件，所以：

constructor(
    ngZone: NgZone 
) { 
    window.onresize = (e) => 
    { 
     ngZone.run(() => { 
      this.resize(); 
     }); 
    }; 
} 

resize() { 
    screenIsSM: boolean = this.platform.width() <= 576; 
    screenIsMD: boolean = this.platform.width() > 576 && this.platform.width() <= 768; 
    screenIsLG: boolean = this.platform.width() > 768 && this.platform.width() <= 992; 
    screenIsXL: boolean = this.platform.width() > 992 && this.platform.width() <= 1200; 
}