結果:\nfont-size: 18px;\nfont-size: 1.125rem;
■ (例) ルート基準が(16px)の場合
なぜ？ font-size: 22px; の後に font-size: 1.38rem; を書くの？
・ブラウザのデフォルト設定との相性を良くするため
・アクセシビリティを向上させるため
・柔軟なデザイン調整を可能にするため
ブラウザのデフォルトでは、ユーザーがフォントサイズを自由に変更できる設定になっています。
px は絶対的なサイズで固定されますが、rem を使うことで ユーザーの設定に合わせてフォントサイズを調整できる のです。
■ 具体的な動作の流れ
font-size: 22px;
font-size: 1.38rem;
まず、先に 22px を書くことで 古いブラウザでも最低限のサイズを確保 できます。
ブラウザは 後から書かれた 1.38rem を優先(上書き) して適用します。
※ 補足: 1.38rem は、ルートの font-size (デフォルト 16px) を基準に計算されます。
16px × 1.38 = 22.08px となり、22px に近いサイズになります。
■ rem のメリット
1. ユーザーの設定に対応できる
px だけだと 拡大・縮小 の影響を受けにくい。
rem を使うと、ユーザーが ブラウザ設定でフォントサイズを変更したとき に適用される。
2. レスポンシブデザインが楽になる
ルート (html { font-size: 16px; }) の値を変更するだけで 全体のフォントサイズを一括調整できる。
例えば、モバイルでは font-size: 14px; にすれば、全体の rem が自動調整される！
3. 設計がシンプルになる
px だと サイズごとに細かく指定 しないといけない。
rem なら ルートサイズ基準で統一できる ので、コード管理が楽！
なぜルート基準が 16px なのか？ rem（root em）は HTML のルート要素 () の font-size を基準にする単位 ですが、ほとんどのブラウザのデフォルト値が 16px に設定されています。 その理由は 歴史的な背景 や 可読性 との関係があります。
1990年代のブラウザ設計時、デフォルトのフォントサイズとして 16px が選ばれた。 これは 印刷物の標準的な可読性を基にしたサイズ で、当時のディスプレイ解像度（72dpi〜96dpi）と最適なバランスを取るために決められました。 ✔ Netscape Navigator や Internet Explorer などの初期のウェブブラウザが 16px をデフォルトに設定。 ✔ その後、新しいブラウザ（Chrome, Firefox, Safari, Edge）もこの仕様を 互換性のため 維持。 ✔ つまり、すべてのブラウザが 16px を「デフォルトの標準サイズ」として扱う のが一般的になった。 2️⃣ 人間の視認性・可読性の最適化 👀 16px は、人間が快適に読める最小サイズとして適切だった！ 🧐 研究では 「読みやすいフォントサイズの最低ラインは 16px」 という結果があり、 スマホやPCの画面でも 16px 未満だと可読性が低下する ことがわかっています。 📌 「昔のWebサイトは 12px くらいが多かったけど、最近のサイトは 16px 以上が主流」 👉 これは 解像度が高くなり、細かい文字は見えづらくなったから！ 👉 モバイルユーザーも増えたので 16px は可読性を考えた最適な基準値になった。 3️⃣ CSS のレスポンシブ設計と拡張性 🎨 レスポンシブデザインでは rem を基準にすると便利！ 例えば、html { font-size: 16px; } を 変更 すると、 📱 スマホなら 14px にしたり、💻 大画面なら 18px にしたりして 全体のバランスを調整 しやすい。 💡 1rem = 16px を基準にしておけば、 1.25rem 👉 20px 1.5rem 👉 24px みたいに スケールしやすい！