CSSにはどのような単位があるのでしょうか？

CSS 単位は、%、パーセンテージ、in、インチ、cm、センチメートル、mm、ミリメートル、em、pt、ポンド (1pt は 1/72 インチに等しい)、pc、12 点可動タイプ ( 1pc は 12 ポイントに相当します ); px、ピクセル (コンピュータ画面上のポイント); vw、全画面の幅は 100vw; Vh、全画面の高さは 100vh です。

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

% パーセンテージ

インチ単位

cm cm

mm mm

em

1em は、現在のフォントサイズ。

2em は、現在のフォント サイズの 2 倍に相当します。

たとえば、要素が 16 ピクセルで表示される場合、2em は 32 ピクセルです。

CSS では、em はユーザーが使用しているフォントに自動的に適応するため、非常に便利な単位です。

ex ex はフォントの x 高さです。 (x 高さは通常、フォント サイズの半分です。)

pt ポイント (1 pt は 1/72 インチに相当します)

pc 12 ポイント タイプ (1 pc は 12 ポイントに相当します)

px ピクセル (コンピュータ画面上の点)

vw: (値 1 ～ 100)、全画面幅は 100vw であり、画面に適応することを理解してください。

Vh: (値 1-100)、全画面の高さは 100vh、アダプティブ画面であることを理解してください。

拡張情報:

1. em と px の問題

px とは何ですか?

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

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

PX機能

1. IEではpxを単位としたフォントサイズの調整はできません;

2. 海外の Web サイトのほとんどが調整できる理由は、フォント単位として 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 code

p { text-indent: 2em; }

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

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

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

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

1. em の値は固定されておらず、
2. em は親要素のフォント サイズを継承します。

em の書き換え手順:

1. 本文セレクターで Font-size=62.5% をステート;
2. 元の px 値を 10 で除算し、置き換えます。単位として em;

   単純に、上記の 2 つの手順だけで問題を解決できるのであれば、誰も px を使用する必要はありません。上記の 2 つの手順を実行すると、Web サイトのフォント サイズが予想外に大きいことがわかります。 em の値は固定されておらず、親要素のサイズを継承するため、コンテンツ p のフォント サイズを 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 はフォントの高さを継承します。 content. 、つまり 12px です。したがって、p の 1.2em は 12px ではなく、14.4px になります。

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

   IE の 12px の漢字:

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

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

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

2.rem の機能

    rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

例:

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

注:

    选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。

以上がCSSにはどのような単位があるのでしょうか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。