同じCSSで、異なるページで異なるフォントサイズを生成しています

Question

私のWebアプリケーションの小さな画面表示用にCSSを作成しようとしています。ここにシナリオがあります。

私はクラスを持っていますが、それを.noListItemsWordsと呼ぶことができます。

.noListItemsWords { 
    font-size: 80%; 
} 

どこでもフォントサイズを設定し、両方のページで、このからDOMアップのみ親が24ptのフォントサイズを持っている体、です。 32PXの 2ページ

、ブラウザだけでこれをレンダリングしているフォントサイズ：

ページ1で

、ブラウザは47.7681pxのフォントサイズでこの要素をレンダリングしています

なぜこれが起こりますか？それに対処する方法はありますか？ Google Chromeの57

Answer 1

まあ、私は本当にこれはそれを修正する理由を理解しますが、ビューポートのためのメタタグを追加すると、フォントの動作がに戻って行われていない予想：

<meta name="viewport" content="width=device-width, initial-scale=1"> 

Answer 2

あなたに

をテスト済み：

EDIT：私のフォントのために私の体タグとレム単位でベース割合を使用しても問題が解決しないことを示す body CSSにfont-sizeを割合で設定する必要があります。次に、remを使用して、個々の文字列のサイズを設定します。

remは、フォントを基数bodyクラスに入れた割合に比例して調整します。

body { 
    font-size: 100%; 
} 

.noListItemsWord { 
    font-size: 0.8rem; 
}