css3 での REM の使用の紹介

ページのフォントを設定するには、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 サイトの他の関連記事を参照してください。