CSSでは、適切な単位を選択することは、レスポンシブデザインとユーザビリティを実現するために極めて重要です。

px、emとrem最もよく使われる3つの長さの単位であり、それらの主な違いは参照基準の違いにあります。

1. px（ピクセル - 画素）

pxは絶対単位（スクリーンディスプレイ上）です。画面上の1つの物理ピクセルを表します。

• 特徴：固定サイズで、ブラウザの設定や親要素のフォントサイズによって変わりません。
• 利点：正確で制御が容易であり、「ピクセル単位」での位置合わせが必要なシーン（枠線、小さいアイコンなど）に適しています。
• 欠点：柔軟性に欠け、レスポンシブレイアウトには不向きです。ユーザーがブラウザでフォントを拡大した場合、pxpxで定義されたレイアウトは、それに応じて調整されない可能性があります。

2. em（Relative to Element - 相対単位）

emは相対単位、その参照対象は現在の要素或親要素のフォントサイズ（font-size)。

• 計算ルール：
• もし使用する場合font-size、参照するのは親要素のフォントサイズです。
• 他のプロパティに使用する場合（例：width、padding、margin）、参照するのは現在の要素自身のフォントサイズです。

• 欠点：複合・累積効果。多層にネストされ、すべてで使用する場合em、計算が非常に複雑になります。

例：
親要素が20px、子要素が設定する場合font-size: 1.5em;、子要素の実際のサイズは になります。

3. rem（Root em - ルート相対単位）

remも相対単位ですが、参照するのはルート要素（すなわち<html>タグ）のフォントサイズです。

• 計算ルール：要素がどれだけ深くネストされていても、1rem常に等しい<html>のfont-size。
• 利点：
• 予測可能性が高い：回避できるのはem累積ネスト問題です。
• レスポンシブ対応に優れている：修正するだけでhtmlのフォントサイズを変更すると、ページ全体のremレイアウトが比例して拡大縮小されます。

• デフォルト値：ほとんどのブラウザのデフォルトのルートフォントサイズは16pxです。そのため、デフォルトでは1rem = 16px。

主な違いの比較表

まとめと提案

1. 最初に選ぶべきremタイポグラフィとレイアウトに使用：これにより、ユーザーがブラウザのフォントサイズを調整しても、あなたのウェブページは美しく拡大縮小できます。
2. 次に選ぶのはpx固定の詳細に使用する場合です：例えば1pxの枠線は、拡大縮小によってぼやけたり消えたりしてほしくない場合。
3. あまり選ばないem局所のみに使用：ある要素のPaddingやMarginが、その要素の文字サイズに合わせて拡大縮小する必要がある場合（例：適応型ボタン）にのみ、使用を検討します。em。

ちょっとしたテクニック：
計算を簡単にするため、多くの開発者はhtmlのフォントサイズを62.5%（すなわち ）に設定します。これにより、コードを書く際に、1.4remは直接対応し14px、シンプルで直感的です。