[RWD]レスポンシブウェブデザインのフォントの設定
□□本日の授業□□
- レスポンシブウェブデザインでのフォントの設定について
- 3月上旬に作った1カラムの課題をレスポンシブ対応に改造。
- 石垣島観光ガイド
- ガラスの靴を探しています
レスポンシブウェブデザインでのフォントの設定について
レスポンシブウェブデザインでは、フォントの単位をremにする
emは先祖要素の設定を継承するため、表示サイズは累乗の計算になる。
「rem」の意味は「root」+「em」で、root 要素(つまり、html要素)のフォントサイズを継承する。
ただし、remはCSS3で追加された単位なので、IE8以下は不対応のため
ピクセルに直したものと両方記述すべし。
とりあえずremのrootであるhtmlの基準を、
html { font-size: 62.5%;} つまり10pxと設定しておく。
PC用の記述
※これ以外にul、ol、など他の使用要素があれば、それに応じて追加すること
/* レスポンシブ対応 font-sizeの基準 */ html { font-size: 62.5%;} /* = 10px */ body { font-size: 16px; font-size: 1.6rem; } /* = 16px */ h1 { font-size: 32px; font-size: 3.2rem; } /* = 16px */ h2 { font-size: 24px; font-size: 2.4rem; } /* = 16px */ h3 { font-size: 20px; font-size: 2.0rem; } /* = 16px */ h4 { font-size: 18px; font-size: 1.8rem; } /* = 16px */ p { font-size: 16px; font-size: 1.6rem; } /* = 16px */
スマートフォン用の記述
※スマートフォンではIEは使用しないと思われるので、remだけで良い
@media screen and (max-width: 640px) { /* font-size */ html { font-size: 62.5%;} /* = 10px */ body { font-size: 1.6rem; } /* = 16px */ h1 { font-size: 3.2rem; } h2 { font-size: 2.4rem; } h3 { font-size: 2.0rem; } h4 { font-size: 1.8rem; } p { font-size: 1.6rem; }
これはそのページの基準なので、各要素の調整はその下に書いていけばよい。