移動先フォントにマッチした小結

rem
まず、remはルート要素htmlの文字数に対する相対単位であり、一般的にデフォルトの文字数は16 pxであり、1 rem=16 pxである
1.ヘッダーの中のmetaタグを先に設定します.

2.JSでユーザー画面に適応するルート要素の番号を計算する

 　　document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + 'px';

上の640は置換可能で、設計原稿の幅です.
このようにiphone 8(375 px)下htmlのfont-sizeは14.0625 px、iphone 8 p下font-sizeは15.525 pxであり、1つの要素font-sizeは1.7066 remであり、font-sizeを24 pxに設定するのと同じ効果が得られる(24/14.0625=1.7066).このpx->remの計算はpostcssのような既存のツールで行うことができる.
メディアクエリ
メディアクエリーを使用して、異なる画面幅に異なるルート要素の番号を設定することもできます.

@media screen and (min-width: 375px){
    html {
        font-size: 14.0625px;   
    }
}
@media screen and (min-width: 360px){
    html {
        font-size: 13.5px;
    }
}
@media screen and (min-width: 320px){
    html {
        font-size: 12px;
    }
}
html {
    font-size: 16px;
}