Edited at

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

More than 1 year has passed since last update.

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

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

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

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

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


大前提

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 :innocent:


%指定

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

相対値(relative)

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


hoge.css

html{

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

A.8px :innocent:

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 :innocent:

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 :innocent:

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