ページのフォントを設定するには、px と em の 2 つの一般的なフォントがあることがわかっています。
px
Web ページの制作では、より安定していて正確であるため、通常、テキストの設定に「px」を使用します。しかし、この方法には問題があります。ユーザーがブラウザで作成した Web ページを閲覧するときに、ブラウザのフォント サイズを変更します (ただし、この時点ではほとんどの人はブラウザのフォント サイズを変更しません)。私たちの Web ページを使用します。 ページ レイアウト が壊れていたため、Web ページのフォントを定義するために「em」を使用することが提案されました。
em
は一般に本文のfont-size
一般的に使用される書き込み方法に基づいています:
body { font-size: 62.5%; /*10 ÷ 16 × 100% = 62.5%*/ } h1 { font-size: 2.4em; /*2.4em × 10 = 24px */ } p { font-size: 1.4em; /*1.4em × 10 = 14px */ } li { font-size: 1.4em; /*1.4 × ? = 14px ? */ }
「li」の「1.4em」が「14px」であるかどうかが疑問符なのはなぜですか? 「em」を単位として使用する場合、「em」は相対値であり、親要素からの相対的な値であるため、その親要素の設定を知る必要があります。
計算式: 1 ÷ font-size親要素 × 変換する必要があるピクセル値 = em 値
この場合、「1.4em」は「14px」でも良いし、「20px」でも「24px」でも良いです。値が不確実であるため、親要素の値がわかっているか、子要素で「1em」を使用して、この問題を解決してください。
rem
rem: W3C 公式 Web サイトの説明は「ルート要素のフォント サイズ」です。つまり、rem はルート要素に対する相対サイズです。
ルート要素で参照値を決定し、ルート要素でフォント サイズを設定するだけです。これは完全に独自のニーズに基づいて行うことができます。
一般的に使用される記述方法:
html { font-size: 62.5%; /*10 ÷ 16 × 100% = 62.5%*/ } body { font-size: 1.4rem; /*1.4 × 10px = 14px */ } h1 { font-size: 2.4rem; /*2.4 × 10px = 24px*/ }
は、ルート要素の62.5%(つまり10px)の基本フォントサイズを定義します。この値を設定するのは主に計算を容易にするためです。設定されていない場合は、「16px」に基づきます")。上記の計算結果から、「rem」を「px」と同じように便利に使用できると同時に、「px」と「em」の違いを解決することができます。
注: Chrome では、デフォルトの下部フォントは 12 ピクセルですが、その他の場合は font-size: 625% などに設定できます
ブラウザの互換性
必要に応じて、CSS3 をサポートする IE9 以降のブラウザが確実にサポートされます。 IE の下位バージョンと互換性があるため、IE9 より下位バージョンのブラウザには px の使用を検討できます。
以上がcss3 での REM の使用の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。