CSS3でのREMの使い方を詳しく解説

ページにフォントを設定するには、px と em の 2 つの一般的なフォントがあることがわかっています。

px

Web ページ制作では、通常、テキストの設定に「px」を使用します。比較的安定していて正確です。しかし、この方法には問題があります。ユーザーがブラウザで作成した Web ページを閲覧するときに、ブラウザのフォント サイズを変更します (ただし、この時点ではほとんどの人はブラウザのフォント サイズを変更しません)。ページ レイアウトが壊れているため、Web ページのフォントを定義するために「em」を使用することが提案されました。

em

一般的に、本文のフォントサイズがベンチマークとして使用されます

一般的な書き方:

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 はルート要素に対する相対値です。

ルート要素で基準値を決定し、ルート要素でフォント サイズを設定するだけです。これは、以下の図を参照することもできます。変換するのが面倒だと思う場合は、Web サイト http://pxtoem.com/ にアクセスして、

共通の書き込み方法を設定することもできます:

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 では、デフォルトの下部フォントは 12px ですが、他のフォントについては font-size: 625% などを設定できます

上記は、CSS3 での REM の使用方法の詳細な説明です。さらに関連するコンテンツについては、 PHP 中国語 Web サイト (www.php.cn) にご注意ください。