この記事でcssで扱える単位を調べた時にでてきたvw,vh,vminという単位。
vw は viewport width
vh は viewport heightといって、1vw はwidthの1%と同じ、1vh はheightの1%と同じらしい。
なんで%が既にあるのにわざわざvwやvhがあるのかというと、
#main{
width: 50%;
}
このときの50%は、横に対しての50%なので、常に、50vwということになる。
高さに対する50%を使いたければ、vhを使って、
#main{
width: 50vh;
}
としなければいけない。
さて、vminはなにかというと、vwとvhの小さい方の値を使うらしい。
たとえば、
#main{
width: 50vmin;
}
としたとき、vwが10でvhが5の時はvhの5が使われる。つまり高さに対しての50%になるらしい。
縦のほうが長い時はこのスタイル、横のほうが長い時はこのスタイル、というようにJSでの場合分けが要らなくなるのかな。
自分が使う日は来ない気もする・・・。
