ここ数日、日中は30°近く気温があがって、もう夏が目の前にきてますね。
私が住んでいる地域では、早朝や夜はまだ少し寒くて洋服選びに頭を抱える毎日です。
スマホサイトの作成においてよくあるのが、大見出しなどの「改行」問題。
iphone6とiphone5では画面幅が異なり、変なところで改行されてしまいます。
レスポンシブサイトの際、PCとスマホに関しては私はこれまで＜br＞の指定をdisplayを使用してスタイルシートで分けてました。
スマホのサイズのちがうものは、フォントサイズをmedia Queriesでわけるというなんともめんどくさいことをしていたのです。ほんとめんどくさい！
ときどきvwやvhなどを使用してみたものの、なんだかうまくいかないなぁ～。
ともやもやしていたのですが、最近vminという値に出会いました！
今回はvminと一緒に、vwやvhの概念もご紹介します！
フォントサイズををvminで指定してみた
See the Pen vmin by sayuri (@giraffeweb) on CodePen.0
使ってみるとわかるんですが、変なところで改行されることなく、画面幅とちゃんと一緒に小さくなってくれるんです。
上のcodepenのコードをcssとresultがが表示される状態に切り替えてみてください。
改行されませんよね。
vw/vh/vmin/vmaxのそれぞれの性質について
◆vw（viewport width）
ビューポートの幅への割合で値が決定します。
◆vh（viewport height）
ビューポートの高さへの割合で値が決定します。
◆vmin（viewport minimum）
ビューポートの幅と高さどちらかの値が小さい方への割合で値が決定します。
◆vmax（viewport max）
ビューポートの幅と高さどちらかの値が大きい方への割合で値が決定します。
画面いっぱいに画像を出す際にvw/vhはよく使われていますが、文字に指定するとビューポートを基準にしてサイズを指定できます。
ただこれレスポンシブサイトを作成してるときにスマホで適応すると「なんか違う感」になるんです。
ブラウザの幅だけならvwでも良いのですが、幅だけでなく高さにも対応しているvminで指定することで、スマホでの文字表示対応できますね！
みなさんも今後スマホサイトを作成する際に使用してみてください。