レスポンシブ対応のコーディングが一般的になって来た今日この頃ですが、

多くのコーディング代行をさせて頂く中で、ふと気になったので、記しておきます。

 

レスポンシブcssでスマホの対応をする場合ですが、そもそも、デザインが9pxや8pxとかで指定されている事もしばしば。

 

現状ではWEBのfontで表現できる最小サイズは10pxですね。

単位(px em % rem)は変われど、それ以下は表示ができません。
（その場合、テキスト画像にして対応しています。）

 

PCのデザインとスマホのデザイン（あれば）を入稿頂き、実装を進めるのですが、

PC = 1200px スマホ = 767px or 640px

みたいな形でデザインを入稿頂きます。

 

PC版はフォントサイズをそのまま指定（ ”px” or “em” or “%” or “rem” など）して良いかと思いますが、スマホ版だとデザイン上、フォントサイズは非常に大きな数字で入稿されます。

 

コーディングを始めた当初、スマホのフォントサイズの指定に、いつも曖昧な時期がありました。

 

フォントサイズ　各それぞれの単位の違い（”px” “em” “%” “rem”）

 

px	絶対指定	指定したサイズ
em	相対指定	親要素を基準に計算される
%	相対指定	親要素を基準に計算される
rem	相対指定	root要素（html）を基準に計算される

 
それぞれはこの様な意味ですね。

具体的には、

bodyのfont-sizeを100%にした場合、100% = 16px
1em = 16px
2em = 32px

となります。

上記の様にすると、計算するのが少し面倒なので、1em = 10px にする為に
bodyのfont-sizeを62.5%に指定します。

これで 1em = 10px になりますので、

14px = 1.4em
16px = 1.6em
22px = 2.2em

みたいな形で指定できます。

em、%、でのフォントサイズ指定は、相対指定(親要素を基準)で計算されるので、注意が必要です。
対してremでの指定は相対指定ですが、root(html)を基準値にしますので、remでの指定がわかりやすいですね。

レスポンシブ対応の場合、全てのフォントサイズを rem で指定し、メディアクエリで root(html) の基準値を変更する事で、フォントサイズを変更します。

最近は “vw” “vh” で指定する事も多くなってきました。

（個人的には、vwでの指定が好き）

それぞれの意味は

vw	viewport width	ビューポートの幅に対する割合
vh	viewport height	ビューポートの高さに対する割合
vmin	viewport minimum	ビューポートの幅と高さのうち、値が小さい方に対する割合
vmax	viewport max	ビューポートの幅と高さのうち、値が大きい方に対する割合

みたいな感じですね。

なぜ vw を好んで使用するかと言うと、rem での指定だとメディアクエリで指定したpx範囲でのみ、フォントサイズが変動しますよね。
昨今の多種多様なデバイスサイズを全て網羅するのは、中々難しいですよね。。。

vw での指定だと、ビューポートの幅で変動するので、全てのデバイス幅に対応可能ですよね。
（そもそも vw に対応している必要はありますが。）

なので最近は vw で指定しています。

皆さんはいかがでしょうか？