34939


**htmlまたはbodyのように、全体基準となるタグへのfont-size指定は、「%指定」と「px指定」の何れが良いでしょうか？**

**100%＝16px**  
・これは仕様で決まっているのでしょうか？  
・それとも現状のブラウザ実装が単にこうなっているだけでしょうか？  
・ブラウザのデフォルト値なら敢えて指定しなくても良い気もするのですが…  
・将来的に変更される可能性はある？  
・モバイル表示の際も適用される？

**%指定**  
・pxではない方が柔軟に対応できる？  
・将来的に仮に「100%＝16px」でなくなったとしても対応できる？

**16px**  
・100%指定すると、もしかすると一部のブラウザでフォントサイズが異なったりすることもあり得る？  
・その場合はpx指定の方が確実？


CC BY-SA 3.0
2017-05-22T14:17:26.560
34937
2017-05-23T12:39:37.860
7886
question
css
font-sizeは%またはpxの何れで指定する方が良い？ 100%＝16pxは何に基づくのでしょうか？


デフォルトのフォントサイズが16pxというのは、「現在の多くのブラウザの **デフォルト**
設定がそうなっている」というだけです。例えばChromeでは普通に設定項目として存在します。

[![画像の説明をここに入力](https://i.stack.imgur.com/NWmmX.png)](https://i.stack.imgur.com/NWmmX.png)

* * *

% em rem といった相対値のわかりやすい利点は、祖先要素（ルート要素など）のfont-
sizeを変えることでまとめてフォントサイズを変更することができる、というものです。文字サイズ変更ボタンをJavaScriptで実装する場合などでは特に便利です。逆に、祖先要素のフォントサイズに関わらず特定のサイズに固定したい場合は
px 等による絶対値指定を行います。

また % や em
は親要素のフォントサイズが基準になるので、入れ子にすればどんどん小さく・大きくなっていきます。入れ子になるタグでは便利かもしれません。逆にこれを避けたい場合は、常にルート要素のフォントサイズを基準にする*2
rem を使うと便利です。

全てを相対値で指定した場合、ブラウザのデフォルトのフォントサイズに依存することになりますが、冒頭に書いたようにこれはユーザーによる設定や環境によって変化します。ユーザーの好みやブラウザの推奨設定を反映するという意味ではよい方法*1ではありますが、フォントサイズが変化してもレイアウトが崩れないように設計しなければなりません。

それが難しい場合に、全体的には相対値を使いつつも環境によっては左右されない方法が、ルート要素にだけ px による絶対値指定を行うというものです。

*1: 特に古いIEには現在主流のズーム機能が存在せず、ルート要素のフォントサイズの変更をすることでしか文字を大きくする方法がなかったので、絶対値指定されていると不便という話がありました。  
*2: 相対値の基準となる値は計算された値 (computed value) なので、基準となる要素に font-size が指定されていなければ、継承された値、もしくはルート要素であればデフォルト値が使われます。またルート要素で相対値を使用した場合、デフォルトのフォントサイズを基準に計算されます。


CC BY-SA 3.0
2017-05-22T15:14:47.150
34939
2017-05-23T12:39:37.860
2017-05-23T12:39:37.860
8000
8000
34937
answer


用途によって違うのではないでしょうか。  
固定のサイズで見せたいのであればpx、画面によってサイズが変更して欲しい時は%を利用すると思います。  
%については後で要素を追加したりして割合が変わった時に自動的に指定した%で変更したりする時に利用したりします。


CC BY-SA 3.0
2017-05-23T00:10:17.550
34942
2017-05-23T00:10:17.550
22763
34937
answer