Question

我正在尝试更改字体大小，使其随方向而变化，并根据屏幕宽度重新计算。当横向和纵向之间的方向发生变化时，如何更改字体大小？我尝试过一个事件监听器，但它没有改变大小。

打字稿代码

import {Component} from "@angular/core";
import {NavController} from 'ionic-angular';

@Component({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {

  public fontSize: any;

  constructor(private navController: NavController) {



    window.addEventListener("orientationchange", this.setFontSize, false);

  }


  public setFontSize() {

        this.fontSize = screen.with * 0.059375;

    }
  }



}

HTML代码

<ion-navbar *navbar>
  <ion-title>
    teste
  </ion-title>
</ion-navbar>

<ion-content class="home" padding>
  <p [ngStyle]="{'font-size': fontSize + 'px'}">TEXT</p>
</ion-content>

Answer 1

扔掉javascript，然后使用CSS：

@media all and (orientation:portrait) {
 p { font-size: 20px; }
}
@media all and (orientation:landscape) {
  p { font-size: 10px; }
}

或使用一个作为默认值：

p { font-size: 20px; }
@media all and (orientation:landscape) {
  p { font-size: 10px; }
}

使用orientationchange更改font-size

1 个答案: