如何为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; 
}