CSSのfont-sizeが%とかemとかremとかvwで指定されてると、ビビっちゃう君と僕を救う2分

ーーーーーーーーー
追記
2020年10/15

この歳になるとこういう記事のアプトプット怖いですね。。
とりあえず周り見てると、こうやってる人多いです

html,body{
font-size:62.5%;
}
って書いてあげて　そうすると 1.0rem が 10pxになるみたい。

そんで例えば24pxにしたい場合は2.4remって指定してあげるみたい。

以上。
ーーーーーーーーー

いまだにレスポンシブ怖い、、、、。

なぜなら%とかemとかremのフォントサイズ指定があるから。。。

これらをなんとなくでしてる人。

途中で引き継いだ案件とかでpx以外が指定されててビビってしまった

僕とあなたへ捧げます。 😭

大前提

CSSのフォントサイズ指定方法は次の2つに分類
絶対値（absolute）....16pxって言ったら絶対16px
相対値（relative）....親要素のサイズによって可変

px指定

みんな大好き安心のpx指定。
16pxって指定したら親のサイズが何であれ、16px。

絶対値（absolute）

Q.pタグのフォントサイズは何pxで表示されますか？

hoge.css

html{
    font-size:100%;
}
p{
    font-size:16px;
}

A.16px

%指定

親要素のサイズの~~%というように可変。

相対値（relative）

Q.divの子要素のpタグのフォントサイズは何pxで表示されますか？

hoge.css

html{
    font-size:100%;
}
div{
    font-size:16px;
}
div > p{
    font-size:50%;
}

A.8px

divが16pxなので、その50%なので8px

em指定

パーセントと一緒の考え方。
50パーセントが5割という表記に変わるような感じ

50%は0.5em
100%は1em

Q.divの子要素のpタグのフォントサイズは何pxで表示されますか？

hoge.css

html{
    font-size:100%;
}
div{
    font-size:16px;
}
div > p{
    font-size:0.5em;
}

A.8px

divが16pxなので、その半分なので8px

休憩 大事な豆知識

ブラウザのデフォルトサイズは
100% = 1em = 1rem = 16px = 12pt

rem指定

emと同じような考え方だが、ルート(html)に対する割合のサイズ

相対値（relative）

Q.divの子要素のpタグのフォントサイズは何pxで表示されますか？

hoge.css

html{
    font-size:100%;
    /* つまり16px */
}
div{
    font-size:2em;
}
div > p{
    font-size:0.5rem;
}

A.8px

divは32pxだけど、htmlが16pxでその半分なので8px

ラスボス vw vh指定

(2016/7/5 追記)

おそらく一番ビビってしまうだろう、vw vh指定について、勇気を出して調べてみた。

「ブラウザの幅に応じてフォントサイズを可変に対応する方法は、
メディアクエリーで複数サイズ指定する以外にないのか...？」

その答えがこちらだそうです。

vw・・・viewport width。ビューポートの幅に対する割合。
vh・・・viewport height。ビューポートの高さに対する割合。

ブラウザの横幅全体を「100vw」
10vwは、1/10のサイズ。

画面の横幅が320pxの時に、14pxのフォントサイズで表示したいときは、
14px÷320px=0.04375(4.375%)なので「4.375vw」と記述。
主要に合わせて、後可変。

これは正直心折れたwww 😭
最前線だとスタンダードなのかな？

参考
フォントサイズを「vw・vh」でビューポートの幅にあわせて可変させる
https://skygold.jp/web/2901.html

おまけ

body { font-size:62.5%; }
よく見るこれは、1emが10pxになるように調整する為らしい。

理解を深める参考サイト

[CSS]フォントサイズの指定方法の基礎知識からレスポンシブに適した指定方法までやさしく解説
http://coliss.com/articles/build-websites/operation/css/css-font-sizing-by-ire.html

あなたはどれにする？CSSの文字サイズ指定「px、em、%」
http://blog.karasuneko.com/html-css/font-size-px-em-percent/

フォントのサイズ指定はpx？ em？ 既存の再検討とこれからのテクニック
http://coliss.com/articles/build-websites/operation/css/font-size-with-rem-by-snook-ca.html