レスポンシブの単位には％よりもvw, vhが便利！フォントサイズの指定にも使える

レスポンシブデザインを取り入れたサイトを制作するとき、widthの幅やpaddingの数値などをpxではなく%で指定することが多いかと思います。

ですが、%指定だとかゆくて届かない場合に役立つ、vw,vhという単位があることを知ったのでメモしておきます！

vw,vhはウインドウサイズによって比率が決まる

%の場合、その数値は親要素の幅に対する比率で数値が割り当てられます。

それに対し、vw,vhはそれぞれスクリーンサイズの幅と高さに対する数値になります。（正確には、viewportのサイズに対する割合）

親要素などに関係なく単純にスクリーンサイズに対する割合で指定できることが、どれだけ便利であるか…笑

実際に使っていくと、本当に便利です。

フォントサイズの指定で特に便利

特に便利だなと思うのが、フォントサイズの指定に使えることです。

改行箇所にまでこだわらなければならない場合など、以前はメディアクエリによってスクリーンサイズごとにフォントサイズを14pxだの12pxだのといちいち指定していました。

こんな感じです。(これまでの例)

@media screen and (max-width:480px) { 
  p{
    font-size: 14px;
  }
}
@media screen and (min-width:360px) { 
  p{
    font-size: 12px;
  }
}
@media screen and (min-width:320px) { 
  p{
    font-size: 11px;
  }
}

しかし、px の代わりに vw（場合によってはvh）を使用するといちいち何パターンも上書きせずとも、画面サイズに合わせたフォントサイズになってくれるので、かーなり便利。

vwを使用すると...

@media screen and (max-width:480px) { 
  p{
    font-size: 5vw;
  }
}

どうでしょう。

これだけです。数値は適当ですが、こんな感じで記述が一回で済みます。

これで、 どのサイズでも改行される位置が変わりません。

素敵すぎませんか。笑

もし、まだこの素晴らしさを知らない人がいるのであれば、是非知っていただきたいです。

デバイスの向きを変えると大変なことになりませんか？

そう思うあなた。安心してください。

vmax,vminという単位も使用できます。

• vmaxは、幅と高さのうち、値が大きい方に対する割合
• vminは、幅と高さのうち、値が小さい方に対する割合

です。

デバイス向きを横にしても縦向きの場合と同じサイズにしたい場合は、vminを使用しましょう。

注意点

対応ブラウザに関する注意点です。

モダンブラウザであれば問題なく動作するみたいですが、古いAndroidは未対応のものがあるみたいです。

そこまで対応する場合、px指定もしておいてその下にvwなどで上書きしておくといいかと思います。

PC基準のレスポンシブサイトの場合はPCのpxが引き継がれると思うので、特に気にしなくても大丈夫かと思いますが…。