使用orientation更改字體大小

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