css_html/css_WEB-ITnoseのpx、em、remの詳細説明

概念の紹介:

1. px (ピクセル、ピクセル): コンピューター システムのデジタル画像の長さの単位です。 px は次のように変換されます。物理的な長さについては、精度 DPI (1 インチあたりのドット数、1 インチあたりのピクセル数) を指定する必要があります。通常、スキャンおよび印刷時に DPI オプションがあります。 Windows システムのデフォルトは 96dpi、Apple システムのデフォルトは 72dpi です。

2. em (現在のオブジェクト内のテキストのフォント サイズに対する相対的な長さの単位): これは相対的な長さの単位であり、元々は文字 M の幅を指していたため、em という名前が付けられました。現在は文字幅の倍数を指し、その使用法は 0.8em、1.2em、2em などのパーセンテージに似ています。通常は 1em=16px です。

3. pt (ポイント、ポンド): 1/72 インチを指す物理的な長さの単位です。 pt=1/72 (インチ)、px=1/dpi (インチ)

4. rem (root em、root em): CSS3 の新しい相対単位であり、広く注目されています。このユニットと他のユニットの違いは何ですか?違いは、rem を使用して要素のフォント サイズを設定する場合、相対的なサイズであることには変わりありませんが、HTML ルート要素に対してのみ相対的なサイズであることです。このユニットは、相対サイズと絶対サイズの利点を組み合わせたものであると言えます。これにより、ルート要素のみを変更するだけですべてのフォント サイズを比例的に調整でき、レイヤーごとにフォント サイズが複合する連鎖反応を回避できます。現在、IE8 以前を除くすべてのブラウザが rem をサポートしています。これをサポートしていないブラウザの場合、解決策は非常に簡単で、追加の絶対単位ステートメントを作成することです。これらのブラウザは、rem で設定されたフォント サイズを無視します。

em と px の間の問題

px とは何ですか?

px ピクセル (ピクセル)。相対的な長さの単位。ピクセル px はモニター画面の解像度を基準としています。 (CSS2.0マニュアルより引用)

emは相対的な長さの単位です。現在のオブジェクト内のテキストに対する相対的なフォント サイズ。インライン テキストの現在のフォント サイズが手動で設定されていない場合は、ブラウザのデフォルトのフォント サイズを基準とします。 (CSS2.0 マニュアルより引用)

PX の機能

1. IE は px を単位として使用するフォント サイズを調整できません。

2.調整の理由は、フォント単位として em または rem を使用しているためです。

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

em とは何ですか?

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

em の特徴:

1em は、親要素のフォント サイズを継承するため、固定値ではありません。どのブラウザでもデフォルトのフォント サイズは 16 ピクセルです。したがって、12px = 0.75emとなります。実際のアプリケーションでは変換を容易にするため、通常は次のようにスタイルを設定します。

CSS code

html { font-size: 62.5%; 、1em = 10ピクセル。一般的に使用される 1.2em は理論的には 12px です。ただし、この変換は IE ブラウザでは成立しません。1.2em は 12px よりわずかに大きくなります。解決するには、HTML タグ スタイルの 62.5% を 63% に変更します。つまり、

CSS コード

です。

html { font-size: 63%; }

中国語の記事では通常、段落の先頭にスペースが 2 つあります。単位として px を使用する場合、12px フォントの場合は 24px を省略する必要があり、14px フォントの場合は 28px を省略する必要があります。この変換は非常に使いにくいです。 em 単位を使用すると、この問題は 1 ワードのサイズが 1em、2 ワードのサイズが 2em として簡単に解決できます。したがって、次のように定義するだけです:

CSS コード

p { text-indent: 2em; }

フォント単位の em と px の違い

フォント単位は px ではなく em にする必要があります。簡単に言うと、IE6 でフォントのスケーリングをサポートしているため、ページ上で Ctrl キーを押しながらスクロール ホイールを押すと、フォントが px の Web サイトは反応しません。 px は絶対単位であり、IE スケーリングをサポートしません。em は相対単位です。

このブログを調整していたら、フォントだけでなく、行間 (line-height) や垂直の高さの単位もすべて em 単位になっていることがわかりました。スケーリング時の整合性を確保します。

em には次の特性があります。

1. em の値は固定されていません。

2. em は親要素のフォント サイズを継承します。

em の書き換え手順:

1. 本体セレクターで Font-size=62.5% を宣言します。

2. em を次のように置き換えます。単位

単純ですが、問題を解決するために上記の 2 つの手順だけが必要な場合は、おそらく誰も px を使用しないでしょう。上記の 2 つの手順を実行すると、Web サイトのフォント サイズが予想外に大きいことがわかります。 em の値は固定されておらず、親要素のサイズを継承するため、コンテンツ div のフォント サイズを 1.2em (12px) に設定できます。次に、セレクター p のフォント サイズを 1.2em に設定しますが、p がコンテンツの子に属している場合、p のフォント サイズは 12px ではなく、1.2em= 1.2 * 12px=14.4px になります。これは、コンテンツのフォント サイズが 1.2em に設定されているため、この em 値は親要素本体のサイズ (16px * 62.5% * 1.2=12px) を継承し、p はその子であり、em はフォントの高さを継承します。コンテンツ、つまり 12 ピクセルです。したがって、p の 1.2em は 12px ではなく、14.4px になります。

3. 拡大されたフォントの em 値を再計算します。フォント サイズの繰り返し宣言を避けてください。つまり、上記の 1.2 * 1.2 = 1.44 現象を避けてください。たとえば、#content でフォント サイズを 1.2em と宣言した場合、p のフォント サイズを宣言する場合、この em はその em ではなく、フォントを継承するため、1.2em ではなく 1em のみにすることができます。 #contentの高さは1em=12pxになりました。

IE の 12px の漢字:

em 変換が完了すると、上記の方法で得られた 12px (1.2em) の漢字が等しくないという奇妙な現象も発見しました。 12px で定義されたフォント サイズを直接使用しますが、それよりわずかに大きくなります。本体セレクターで 62.5% を 63% に変更するだけで正常に表示されます。その理由は、IE が漢字を処理する場合、浮動小数点値の精度が制限されていることが考えられます。この現象は 12px の漢字でのみ発生し、英語には存在しません。解決策は、style.css の 62.5% を 63% に置き換えることです。

px、em、pt 単位変換ツール:

アドレス: http://pxtoem.com/

2. rem の特徴

rem はCSS3 では、新しい相対単位 (root em、root em) が追加され、広く注目を集めています。このユニットと他のユニットの違いは何ですか?違いは、rem を使用して要素のフォント サイズを設定する場合、相対的なサイズであることには変わりありませんが、HTML ルート要素に対してのみ相対的なサイズであることです。このユニットは、相対サイズと絶対サイズの利点を組み合わせたものであると言えます。これにより、ルート要素のみを変更するだけですべてのフォント サイズを比例的に調整でき、レイヤーごとにフォント サイズが複合する連鎖反応を回避できます。現在、IE8 以前を除くすべてのブラウザが rem をサポートしています。これをサポートしていないブラウザの場合、解決策は非常に簡単で、追加の絶対単位ステートメントを作成することです。これらのブラウザは、rem で設定されたフォント サイズを無視します。

例:

p {font-size:14px; font-size:.875rem;}

注: 使用するフォント単位の選択は主に次のようになります。プロジェクト ユーザーベースがすべて最新バージョンのブラウザを使用しているかどうかを判断するには、互換性を考慮する場合は rem を使用するか、両方を同時に使用することをお勧めします。