cssにおけるpx, em, rem, ptの特徴や違い、変換の詳細について

コンセプトの紹介 :

1. px（ピクセル、画素）。 は、仮想の長さの単位であり、デジタル画像の長さの単位のコンピュータシステムであり、もしpxは物理的な長さに変換するには、精度DPI（インチあたりのドット、インチあたりのピクセル数）、スキャンや印刷で指定する必要があります一般的にDPIオプションを持っています。96dpiは、Windowsシステムのデフォルトであり、Appleシステムのデフォルトは72dpiです。

2.エム (長さの相対的な単位、テキストサイズ内の現在のオブジェクトに相対）：長さの相対的な単位であり、最初は文字Mの幅を指しますので、名前em.は今、文字の倍数の幅を指し、同様のパーセントの使用など。0.8em、1.2em、2em、など。通常、1em＝16pxです。

3. pt（ポイント、ポンド）。 pt=1/72(inch)、px=1/dpi(inch)です。

4. rem（ルート・エム、ルート・エム）。 は、CSS3で新たに追加された相対単位で、この単位が注目されています。このユニットはemと何が違うのでしょうか？remを使用して要素のフォントサイズを設定する場合、相対サイズであることに変わりはありませんが、HTMLのルート要素に対してのみ相対であるという違いがあります。このユニットは、ルート要素を変更してすべてのフォントサイズを比例的に調整できるだけでなく、フォントサイズが層ごとに複合化される連鎖反応を回避できるため、相対サイズと絶対サイズの長所を兼ね備えていると言えます。現在、IE8以前のブラウザを除くすべてのブラウザがremをサポートしています。対応していないブラウザでは、絶対単位宣言を追加で記述することで簡単に対応できます。これらのブラウザでは、remで設定されたフォントサイズは無視されます。

1. emとpxの比較

pxとは何ですか？

px ピクセル（Pixel）。長さの相対的な単位。ピクセルpxは、モニター画面の解像度に相対する。(CSS2.0マニュアルより引用)

emは長さの相対的な単位です。現在のオブジェクト内のテキストのフォントサイズとの相対的な関係です。インラインテキストの現在のフォントサイズが人為的に設定されていない場合、ブラウザのデフォルトのフォントサイズとの相対値になります。(CSS 2.0 マニュアルより引用)

PXの特徴

1. IEでは、pxを単位とするフォントのリサイズができない。

2.海外のサイトは、フォントの単位にemやremを使用しているため、ほとんどの場合リサイズが可能です。

{3. 3. Firefoxはpxとem, remを調整できるが、中国のインターネットユーザーの96％以上はIEブラウザ（またはカーネル）を使っている。

emとは何ですか？

｛em emはフォントの高さのことで、どのブラウザでもデフォルトのフォントの高さは16pxなので、未調整のブラウザは1em=16pxに準拠しています。12px=0.75em、10px=0.625emです。フォントサイズの変換を簡単にするために、cssのbodyセレクタでFont-size=62.5%と宣言すると、emの値が16px*62.5%=10pxとなり、12px=1.2em、10px=1emとなり、元のpx値を10で割り、emという単位に置き換えれば良いことになります。

emの特徴

1emは、親要素のフォントサイズを継承するため、固定値ではありません。どのブラウザでもデフォルトのフォントサイズは16pxです。したがって、12px = 0.75emとなります。実際には、簡単に変換できるように、以下のようにスタイルを設定するのが一般的です。

html { font-size: 62.5%; }.

しかし、IEではこの変換がうまくいかず、1.2emは12pxより少し大きくなってしまう。解決策は、htmlタグのスタイルにある62.5%を63%に変更すること、つまり、次のようになる。

html { font-size: 63%; }. 

中国の記事では、段落の最初にスペースを2つ空けるのが一般的です。pxを単位とした場合、12pxのフォントなら24px、14pxのフォントなら28pxが必要です。...... この変換は非常に無駄です。emという単位を使えば、1単語の大きさは1em、2単語の大きさは2emとなり、この問題はよく解決される。したがって、このように定義すればよい。

p { text-indent: 2em; }.

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

フォント単位をpxではなくemにする理由は、単純にIE6でフォントのスケーリングに対応しているため、ページ内でctrl+スクロールホイールを押すと、フォントがpxのサイトが反応しないためです。pxは絶対単位で、IEのスケーリングには対応しておらず、emは相対単位です。
このブログで調整すると、フォントだけでなく、行間（ラインハイト）や縦幅の単位もすべてemになることがわかりました。

emには以下のような特徴があります。
/{br 1. emの値は固定されていない。
2. em は親要素のフォントサイズを継承します。

emの書き換え手順。

1.ボディセレクタでFont-size=62.5%と宣言する。
2. 元のpxの値を10で割って、単位をemに置き換えてください。
シンプルでしょう？もし上記の2つのステップだけで問題が解決するなら、おそらく誰もpxを使うことはないでしょう。上記の2つのステップの後、あなたのウェブサイトのフォントが驚くほど大きくなっていることに気づくでしょう。emの値は固定ではなく、親要素のサイズを継承するため、div contentのフォントサイズを1.2emに設定すると12pxになります。次にセレクタpのフォントサイズを1.2emに設定しますが、pがcontentの子であれば、pのフォントサイズは12pxではなく、 1.2em=1.2 * 12px=14.4px になってしまうのです。これは、contentのフォントサイズが1.2emに設定されており、このem値は親要素bodyのサイズである16px * 62.5% * 1.2 = 12pxを継承し、pはその子として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%に変更することです。

2. rem機能

remは、CSS3で追加された新しい相対単位（ルートem、ルートem）であり、注目の単位である。このユニットはemと何が違うのでしょうか？remを使って要素のフォントサイズを設定する場合、相対的なサイズであることに変わりはありませんが、HTMLのルート要素に対してのみ相対的であるという違いがあります。このユニットは、ルート要素を変更してすべてのフォントサイズを比例的に調整できるだけでなく、フォントサイズが層ごとに複合化される連鎖反応を回避できるため、相対サイズと絶対サイズの長所を兼ね備えていると言えます。現在、IE8以前のブラウザを除くすべてのブラウザがremをサポートしています。対応していないブラウザでは、絶対単位宣言を追加で記述することで簡単に対応できます。これらのブラウザでは、remで設定されたフォントサイズは無視されます。

例

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

注意事項

 フォントの単位の選択は、プロジェクトによって大きく左右されます。ユーザー層が最新のブラウザを使用している場合はremを、互換性が気になる場合はpxを、あるいはその両方を推奨します。

3. フォント変換表

<テーブル

文字サイズ

pt

px

エム

初期

42pt

56px

3.5em

プライマリ

36pt

48px

3em

34pt

45px

2.75em

32pt

42px

2.55em

30pt

40px

2.45em

29pt

38px

2.35em

28pt

37px

2.3em

27pt

36px

2.25em

ナンバーワン

26pt

35px

2.2em

25pt

34px

2.125em

一人

24pt

32px

2em

ナンバーツー

22pt

29px

1.8em

20pt

26px

1.6em

Jr.

18pt

24px

1.5em

17pt

23px

1.45em

tr

16pt

22px

1.4em

ジュニア

15pt

21px

1.3em

14.5pt

20px

1.25em

四番

14pt

19px

1.2em

13.5pt

十八禁

1.125em

十三斤

17px

1.05em

マイナーフォー

12ポイント

16px

1em

11pt

15px

0.95匁

5

10.5pt

14px

0.875em

10pt

13px

0.8em

スモールファイブ

九分九厘

12px

0.75匁

8pt

11px

0.7em

六価

7.5pt

10px

0.625em

7pt

9px

0.55em

小六

6.5pt

8px

0.5em

7

5.5pt

7px

0.4375em

VIII

5pt

6px

0.375em

今回はcssのpx, em, rem, ptの特徴や違い、変換の詳細について紹介しましたが、より関連するcssのpx, emの内容はスクリプトハウスの過去記事を検索するか、以下の関連記事を引き続きご覧ください、今後ともスクリプトハウスをよろしくお願いします。