モダンブラウザではfont-sizeのpx指定でも相対的に大きくなるのに未だにemやremを使用するのはなぜですか？

Question

初心者な質問で申し訳ないのですが、検索してもこの回答にたどり着けなかったので質問させてください。。

CSSのfont-size指定について、『pxでの指定は避けましょう』とされていますが、それはIEの過去のバージョンでブラウザのfon-size設定が効かなくなってしまうからと認識しています。

現在はIE9以下を対応することはほとんどないのでpx指定が定着してきてもおかしくないと思っているのですが、font-sizeをpxで指定することに未だ何か問題があるのでしょうか？

ご教示のほどよろしくお願いします。

Answer 1

現代では、マルチデバイスの対応が必須となってるからです。
つまり、マルチデバイスにおけるレスポンシブデザインで構築することが推奨されているからです。
PCだけであれば、px指定でも特に、どのディスプレイでも、大体同じ大きさのフォントとなって見え方が決まりますが、
例えば、同じ16pxと指定した時、スクリーン上の実際の表示サイズがスマホデバイスによって変わります。
これは、デバイスによって解像度（ここで言う解像度は、dpi、ppiのこと）が違うため、
実画面サイズ（画面のインチ数）、解像度によって、物理ピクセルも論理ピクセル変わるため、
16pxと、ピクセル絶対値では、
あるデバイスでは、1インチで表示されてても、違うデバイスでは、2インチで表示される、などの現象がおきます。

また、Webサイトのデザインの多くは、デザイナーが意図したサイズ感、比率で制作されているため、
フォントの大きさが、デバイスによって、サイズ比率がバラバラになってしまっては、サイトデザインのコンセプトなどに大きく影響してしまうので、
画面サイズの比率から大きさを決めれる、vwや、vhといった、ビューポート系の単位が重宝されているのです。

例えば、デザインは、横750pxのデザイン（現在最も普及されていると思われる物理ピクセル）時に、基本32px（論理ピクセル上は16pxになることが多い）のフォントサイズを基準にする場合、下記のようなCSSを組みます。

html {
  font-size: 4.2666vw;
}
/* pは、デザイン上の28pxの比率のサイズとして扱いたい */
p {
  /* 全体基準の87.5%のフォントサイズとする */
  font-size: 0.875rem;
}

ようは、デザインの比率感を、デバイスによって変えたくないって時に、pxの絶対値だと、都合が悪いってことですね。
PCだけが対象の場合は、pxの指定だけでなんの問題もありません。

Comments

[m.ts10806]

なるほど、質問者のちょっとした思い違いもありますね。pxでは同じデバイス同じブラウザでは相対的に拡縮はしませんし。

[miyabi_pudding]

ですね。
か、もしかしたら、Ctrl + マウスホイールとかして、変わるやん！とか思ったのかも　汗
また、マルチデバイスのことを考えていないのかな？と思い、
本質的に、現代では相対単位を使うべき、と云われる理由って観点だけで回答してみました。
場合によっては、なぜ疑問になっているか？を追求したほうがいいかもですね。

[m.ts10806]

「ブラウザの幅を変えて」なんですけどね。本来。余程要件に含まれてない限り100%以外では対応しませんし。

[yoshi_bgn]

ご回答ありがとうございます！大変わかりやすかったです！
解像度の問題だったのですね・・マルチデバイスを完全に失念していました＞＜

ブラウザ幅で文字サイズを可変にするのは要件でもよくあるのでvwを使ったりするのはわかるのですが、remなんかはユーザの設定によって変わるものなので、なんとなく相対的にしたほうがいいんじゃないかと思いつつも、ブラウザがpxでも相対的に変更してくれるなら別にいいのでは・・？と疑問に思っていました！
納得です！

[miyabi_pudding]

remは、PCなら、下記のようにしたりしして、HTMLのフォント級数を固定させたりします。
（ユーザーのブラウザ拡縮を食らっても、全体デザインと級数比率を一定にするため）
html {
font-size: 16px;
}
p {
font-size: 0.875rem;
}

pxだと相対的にはなりません。
絶対値なので、PCにおいては、ブラウザの表示拡縮を行わない限り、大きさは変わりません。
ただし、ディスプレイによって、実表示の大きさは変わります。
（だいたいのディスプレは、96dpiだが、解像度が同じでも、ディスプレイの実画角、画素数が変わるため）

[yoshi_bgn]

おお、すみません、pxでも大きくなるやん！と思ってたのですがブラウザを拡大してただけで、ブラウザ設定による文字サイズ変更では変わらないのですね＞＜；

また、font-sizeのベースにvwを指定しているのは初めてお目にかかりました。
vwはファーストビューなどの他の要素との組み合わせで絶対レイアウトを崩したくないときくらいでしか私は使わなかったりするのですが、こういう使い方があるのですね！

おはずかしいですが勘違いも含め大変勉強になりました！大感謝です＞＜

Answer 2

個人的には面白い質問だと思います。

現状、px指定をすることに問題はありません。（metaにviewportを設定するなら）
pxではなくemやremを使うことが広まった中でわざわざpxを使う必要性がなくなっているのではないでしょうか？
（個人的にはrem派です）

Comments

[yoshi_bgn]

ご回答ありがとうございます！
なんとなくemやremを使用したほうがいいと言われている中で、実際にはpxでもブラウザの設定を変えるとちゃんと変わってしまうので、なぜpxではだめなのかっていう明確な理由を見つけられず困ってました＞＜
解像度の問題があったようです・・

私は文字サイズにはremで、それ以外の余白関連はemでと使い分けることが多いですー！