Question

我无法在响应式文本属性部分的Ionic 3的CSS实用程序中找到有关此内容的任何内容。

我了解到，我们可以通过定位特定的屏幕尺寸来对齐文字：

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

但无论屏幕大小如何，我们都无法将isMD与ngClass一起用于某些原因isMD evaluates to true。

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

我们的Ionic应用程序中也提供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;
}

如何为Ionic Framework中动态更新的不同屏幕尺寸设置不同的字体大小？

1 个答案: