にゃんこ1混乱しやすい文字サイズ表記を整理にゃん。
レスポンシブサイトでは「rem」指示が人気。混乱しやすいのは「％やem」ですよー。
目次
この記事の内容
- ％やemは、親要素×小要素の数値になる。
- remは、指示した％数値になる。
- pxは、指示した数値になる。
- vwやvhは、画面幅の％数値になる。
％、em(エム)文字サイズ
親要素を基準とした文字サイズで親要素×子要素となる
％やemは、親要素×子要素のサイズにとなる。
％の場合
html{font-size: 100%;}
body{font-size:160%} /*本文の文字サイズ*/
h2{font-size:120%;}
p{font-size:120%;}
a{font-size:120%;}
div{font-size:1.2em;}
h2{font-size:120%;}にゃんと！ 子要素の％が小さいのに、実際は大きい！！
em（エム）の場合
html{font-size: 1em;}
body{font-size:1.6em} /*本文の文字サイズ*/
h2{font-size:1.2em;}
p{font-size:1.2em;}
a{font-size:1.2em;}
div{font-size:120%;}
h2{font-size:1.2em;}- 孫要素は、子要素×孫要素になる
rem文字サイズ
親要素の影響を受けない文字サイズ
多くのブラウザがデフォルト設定の場合の文字サイズが16pxである。よって、多くの場合が「100%=1em=1rem＝16px」。
なので、こちらを最初に書き込んでおくと扱いやすくなる。
html { font-size: 62.5%; } /* font-sizeは16pxの62.5%の10px */合わせて書くと
html { font-size: 62.5%; } /* font-sizeは16pxの62.5%の10px */
body{font-size:1.6rem} /*本文の文字サイズ*/
h2{font-size:1.2rem;}/*font-size: 12px同等 */
p{font-size:1.2rem;}
a{font-size:1.2rem;}
div{font-size:1.2rem;}
h2{font-size:1.2rem;}特徴：レスポンシブサイトにおける端末ごとの文字サイズ設定がしやすい
メディアクエリを使って文字サイズの調整が簡単！
にゃんこ1htmlタグの設定サイズを変更するだけで画面幅に応じた調整が簡単。
@media screen and (min-width: 721px) {
html {
font-size: 75%;
}
}
@media screen and (max-width: 720px) {
html {
font-size: 62.5%;
}
}px文字サイズ
絶対値による文字サイズ指定
ブラウザによってはユーザー操作による文字サイズの拡大／縮小に対応できない。
端末ごとに見た目の文字サイズが異なって表示される場合がある。
body{font-size:16px} /*本文の文字サイズ*/
h2{font-size:12px;}
p{font-size:12px;}
a{font-size:12px;}
div{font-size:12px;}
h2{font-size:12px;}vw、vh
表示画面の高さを基準に、割合で指定
vwの場合
幅の1%１、2で2％になる。
vhの場合
高さの1%１、2で2％になる
まとめ
それぞれの利点
- ％やemは、親要素を変えるだけで％で一括変換できる。（画面幅に応じた大きさになる）
- remは、それぞれ個別に％指示できる。レスポンシブ向け。（画面幅に応じた大きさになる）
- px絶対値でそれぞれ個別に指示できる。（画面幅が変わっても大きさ数値キープ）
- vwやvhは、画面幅に応じた％の大きさになる。
にゃんこ2ちなみに、Chromeのデフォルト最小表示文字10px以下の指示はしない方が良きと思うにゃ。
