文字サイズを指定する単位はいくつかありますが、
良く使われるものについて、説明いたします。
特徴を知っておくことで、レスポンシブ対応をする際に
どれが適しているかなどの判断がしやすくなります。
よく使われる単位の種類
- px（ピクセル）
- %（パーセント）
- em（エム）
- rem（レム）
px（ピクセル）
pxは、親要素やルート要素のサイズを他の単位で指定していたとしても影響を受けないため、直観的にサイズを指定したい場合に便利な単位です。（絶対的な指定）
コーディングの際、非常に分かりやすく第三者が調整しやすいという点も特徴です。
ただし、レスポンシブ対応をする際は、画面サイズに合わせてサイズを指定する必要があり、やや不便です。
%（パーセント）
%は、pxの絶対的指定に対して、相対的指定と言われている単位です。親要素に設定したサイズを基準にサイズが決まります。例えば、親要素のサイズが「32px」に設定されている場合、子要素に50%と設定すると「16px」になります。入れ子構造になっている際にフォントサイズがそれぞれ違う値で指定されている場合は、計算がややこしくなるため注意が必要です。
em（エム）
%と同様に相対指定が可能な単位です。100%=1emと同じものと考えて問題ありません。
%と同様に入れ子構造になっている際は計算がややこしくなるため、注意が必要です。
rem（レム）
remは、root emの略でroot＝htmlを基準とした単位となります。
例えば、htmlにフォントサイズを「16px」と設定した際、入れ子構造だろうと何処に設定しても1rem=16pxとなります。また、2remの場合は「32px」と計算が楽になります。
上記のように計算が楽なためレスポンシブを意識したCSSでの設定を行う際は、「rem」を使用するのが便利だと言われています。
上記だけでは、分かり難いのでremの使い方として
よく言われているやり方を補足として説明します。
※PCファースト前提の記載になってます。
html{
font-size: 100px;
}
@media screen and (max-width: 976px) {
/*976px以下はここから読み込み*/
html{
font-size: 50px;
}
}
少し大げさに設定していますが、PCサイズの場合「1rem=100px」に設定し、モバイルサイズになった場合「1rem=50px」に設定しています。こうすることで、remで設定した場所を自動的に半分のサイズに変更することができます。
よくPCサイズの部分を「62.5％」で設定すると記載されている参考サイト様があります。
こちらの場合は、62.5%は「10px」を表してます。これはブラウザのデフォルトフォントサイズが「16px」となっているため、計算しやすい「10px」に変更するためとなってます。
しかし、GoogleChromeでは最小サイズは10px以下に設定しても適用されない為、注意が必要です。