CSSのpx、em、remの違いは何ですか?

違い: px は、相対的な長さの単位であるピクセルを表します。フォント サイズは、モニター画面の解像度を基準にして設定されます。IE のスケーリングはサポートされていません。em は相対的な長さの単位であり、相対的な長さの単位です。フォント サイズは IE スケーリングをサポートします。rem は相対的な長さの単位であり、HTML ルート要素に対する相対的なフォント サイズを設定します。

# 推奨チュートリアル:

CSS ビデオ チュートリアル

PX、 EM および REM

px の定義はピクセルを表し、他の要素のサイズが変化しても変更されません。

ピクセルのサイズは「相対長」とも呼ばれる「変化」し、ピクセルが大きいほどカラーパレットが豊富になり、よりリアルな色を表現できます。

em は親要素に対する相対的なフォント サイズを表します。Em は相対単位です。固定された測定値はありませんが、他の要素のサイズによって決定される相対値です。

em は、現在のオブジェクト内のテキストのフォント サイズを基準とした相対的な長さの単位です。インライン テキストの現在のフォント サイズが手動で設定されていない場合は、デフォルトのフォント サイズを基準とします。ブラウザの海外での利用が増えています。

すべてのブラウザのデフォルトのフォント高さは 16 ピクセルで、調整されていないすべてのブラウザは 1em=16 ピクセルに準拠します。次に、12px=0.75em; 10px=0.625em; font-size の変換を簡素化するために、CSS の本文セレクターで Font-size=62.5% を宣言する必要があり、em 値は 16px*62.5% になります。 =10px ; このように、12px=1.2em; 10px=1em、つまり、元の px 値を 10 で割って、単位として em を変更するだけです。

REM は相対単位であり、HTML ルート要素に対して相対的です。このユニットは、相対サイズと絶対サイズの利点を組み合わせたものと言え、ルート要素を変更するだけですべてのフォント サイズを比例的に調整でき、レイヤーごとにフォント サイズが複合する連鎖反応を回避できます。

CSS スタイル シートの px、em、rem 単位の特徴

通常の状況では、通常、フォントを定義するために px を使用します。ブラウザのフォント拡大機能が使えず、海外サイトの多くは IE で利用できますが、主な理由は次のとおりです:

(1) IE では px を単位としたフォント サイズの調整ができません。 ## (2) ほとんどの海外 Web サイトが調整できる理由は、フォント単位として em を使用しているためです;

(3) Firefox は px と em を調整できますが、中国のネットユーザーの 96% 以上が IE を使用していますブラウザ (またはカーネル)。

それでは、CSSの単位であるpx、em、remにはどのような特徴があるのでしょうか？

1. px

PX の特徴 PX は実際にはピクセルであり、PX を使用してフォント サイズを設定する場合、より安定して正確です。

しかしこの方法には問題があり、作成したWebページをユーザーがブラウザで閲覧する際、ブラウザのズームを変更するとWebページのレイアウトが崩れてしまうため、 Web サイトの使いやすさを懸念するユーザーにとって、これは大きな問題です。

したがって、Web ページのフォントを定義するために「em」を使用することが提案されました。

2. em

EM の特徴は、ベンチマークに合わせてフォント サイズを拡大縮小することですが、EM は本質的に特定の数値ではなく相対値です。参照ポイントは通常、 の "font-size" に基づいています。たとえば、WordPress 公式テーマ Twentytwelve のベンチマークは 14px=1em です。

一般に、em には次のような特徴があります:

(1)、em の値は固定されていません;

(2)、em はその値を継承します。親要素のフォント サイズ。

したがって、CSS を記述するときは、次の 3 つの点に注意する必要があります:

(1)、本文セレクターで Font-size=62.5% を宣言します。 ##( 2) 元の px 値を 10 で割って、単位として em に置き換えます;

問題を解決するために上記の 2 つの手順だけが必要な場合は、誰も px を使用しないでしょう。上記の 2 つの手順を実行すると、em の値が固定されておらず、親要素のサイズを継承するため、Web サイトのフォント サイズが予想外に大きいことがわかります。コンテンツでフォント サイズを 1.2em に設定することもできます。 div.つまり12pxです。

次に、セレクター p のフォント サイズを 1.2em に設定しますが、p がコンテンツの子に属している場合、p のフォント サイズは 12px ではなく、1.2em= 1.2 * 12px=14.4 px になります。これは、コンテンツのフォント サイズが 1.2em に設定されているためです。この em 値は、親要素本体のサイズ (16px * 62.5% * 1.2=12px) を継承し、p はその子であり、em はコンテンツのサイズを継承します。フォントの高さは 12px なので、p の 1.2em は 12px ではなく 14.4px になります。

(3). フォント サイズの繰り返しの宣言を避けるために、拡大されたフォントの em 値を再計算します。

これは、1.2 * 1.2 = 1.44 という現象を避けるためです。たとえば、#content でフォント サイズを 1.2em と宣言した場合、p のフォント サイズを宣言するときは、1em しか指定できません。 、 1.2em ではありません。この em はその em ではないため、 #content のフォントの高さを継承し、 1em=12px になります。

ただし、12px の漢字は例外で、上記の方法で得られる 12px (1.2em) の漢字は、IE で直接定義されている 12px のフォント サイズと等しくなく、若干大きくなります。この問題は解決しましたボディセレクターの62.5%を63%に変更するだけで正常に表示されますIEが漢字を処理する際に浮動小数点値の精度に限界があるためかもしれません分かりません他に説明がある場合は、最適化方法 (より詳細な最適化については、Ma Haixiang のブログ「効率を向上させることができるが見落とされやすい CSS の詳細を確認する」の関連する紹介文を確認してください)。

3. rem の特徴

rem は、CSS3 に追加された新しい相対単位 (root em、root em) であり、広く注目されています。

EM は親要素を基準にしてフォント サイズを設定するため、問題が発生します。どの要素設定でも、その親要素のサイズを知る必要がある場合がありますが、Rem はフォント サイズを親要素を基準にして設定します。ルート要素< ;html>、これは、ルート要素の参照値を決定するだけでよいことを意味します。

現在、IE8 以前のバージョンを除くすべてのブラウザが rem をサポートしています。

これをサポートしていないブラウザの場合、解決策は非常に簡単で、追加の絶対単位ステートメントを作成することです。これらのブラウザは、rem で設定されたフォント サイズを無視します。

次は例です:

CSS スタイル シートの px、em、rem 単位の違い

通常 次に、px と em の違いを区別します: px は絶対単位であり、IE のスケーリングをサポートしません。em は相対単位であり、IE のスケーリングをサポートします。実際には、CSS 単位の em と px の違い

1. PX: ピクセル

PX は、モニター画面の解像度に対する相対的な長さの単位です。

長所と短所: 比較的安定していて正確ですが、ブラウザーで拡大または縮小するとページが混乱します。

2. EM

EM: 相対的な長さの単位です。EM は、親要素に対する相対的なフォント サイズを設計するために使用されます。インライン テキストの現在のフォント サイズが手動で設定されていない場合は、ブラウザのデフォルトのフォント サイズを基準とします。

長所と短所: EM の値は固定されておらず、親要素のフォント サイズを継承します。

PX と EM 間の変換:

ブラウザのデフォルトのフォントの高さは 16 ピクセルです。変更されていないすべてのブラウザは、1em=16px に準拠します。すると、12px=0.75em、10px=0.625emとなります。

使いやすくするために、em を使用するときは、通常、CSS の本文セレクターで font-size=62.5% を宣言します (em の値は 16px*62.5%=10px になります)。 em 値を取得するには、使用する px 値を 10 で割る必要があります (12px=1.2em、10px=1em など)。

3, REM

REM は CSS3 の新しい相対単位です。REM は相対単位であり、相対 HTML ルート要素です。

このユニットは、相対サイズと絶対サイズの利点を組み合わせたものであると言えます。ルート要素を変更してすべてのフォントのサイズを比例的に調整するだけでなく、フォント サイズ レイヤーの複合による連鎖反応を回避することもできます。レイヤー別です。

現在、IE8 以前のバージョンを除くすべてのブラウザが rem をサポートしています。

プログラミング関連の知識について詳しくは、プログラミング教育をご覧ください。 ！

以上がCSSのpx、em、remの違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。