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

在響應文本屬性下的Ionic 3的CSS實用工具部分，我找不到任何關於此的信息。如何爲Ionic Framework中動態更新的不同屏幕尺寸設置不同的字體大小？

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

<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' }}

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

來源

2017-06-18 anonym

難道你的屏幕大小從來沒有一個設備上更改？屏幕尺寸應該是恆定的。 – wilsonhobbs

我明白這通常是這種情況，但我正在使用Ionic構建PC應用程序，該應用程序在所有分辨率和設備中都應該可讀。 – anonym

你可以在你的構造函數中使用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; 
}

來源

2017-06-18 19:32:59 wilsonhobbs

似乎它應該工作，但它不。無論屏幕大小如何，字體都顯示相同。沒有課程被應用。 – anonym

而不是platform.width嘗試使用本地JS的window.width – wilsonhobbs

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

回答

相關問題