vwで高さを指定する理由

Question

先日、Webデザイナーさんから頂いたCSSに下記のような記述がありました。

.hoge {
  background-color: #rr0000;
  transform: scale(0.5,0.5);
  height: 50vw;
}

恥ずかしながらvwという単位を見たことがありませんでしたので調べてみたところ
viewportという表示領域を100とした時の相対的なwidth指定に利用する単位ということが分かりました。

ただ、vwはviewportの幅に対応したもので、高さの場合はvhという単位があるとも書いてありましたのでWebデザイナーさんに「heightなのになぜvhではなく、vwなんですか？」と質問したところ、お忙しかったのだと思いますが「レスポンシブデザインならそうするのが当たり前だから」としか答えてもらえませんでした。

その後、自分なりにもう一度調べてみましたが、やはり高さをvwで指定する理由が分かりませんでした。
Webデザインに常日頃携わっている方からすれば初歩的な質問だと思いますが、
何故そうする必要があるのかご教示いただけませんでしょうか。
よろしくお願い致します。

Answer 1

例えば、
iPhone 6/7/8：375px×667px
iPhone X：375px×812px
高さは違いますが幅が同じです。

こういう時に、見栄え（高さ）を同じにしたいのかなと。

50vhだと、縦幅によって変わってしまいます。
50vwであれば、常に高さは187.5pxになります。

なので、縦横比を固定したいから50vwにしているのかなと思います。

Comments

[flaumig]

ご回答ありがとうございます。
一般的にこうする、というルールがあるのではなくデザイン上そうする必要がある、だったのですね。ありがとうございます。すっきりしました。

Answer 2

単純に作られているウェブサイトのデザイン上、要素の縦横比を２：１にしたかった、とかではないでしょうか？
高さを指定する際、vhを使わないということはないです。

Comments

[flaumig]

ご回答ありがとうございます。
私が知らないだけで一般的なルールがあるのかと考えておりましたが、そうではなく今回はデザイン上必要だからそうする、だったのですね。ありがとうございます。