CSSのvm、vh、vmin、vmaxって何？パーセントのようなそうではない単位
色々なコードを見ていると、時々 「これ知らない！」 ってなるのでその都度調べて学習していくスタイルなんですが
vminがスタンダードに使えるようになったら便利かもしれないというのが感想
vw、vh、vmin、vmaxって何？
どれも長さの単位です
使い方はpxや%と同じく単位として使います
vはviewportで それぞれは以下の略である
VW ＝ viewport width
VH ＝ viewport height
VMIN ＝ viewport mini
VMAX ＝ viewport max
vwって？
vmはviewportに対する横の割合で指定します
1vm は 1％ に相当する
vhって？
vhはviewportに対する縦の割合で指定します
1vm は 1％に相当する
vminって？
vminはviewportのどちらか短い方の割合で指定します
1vmin は 1％に相当する
vmaxって？
vmaxはviewportのどちらか長い方の割合で指定します
1vmax は 1％に相当する
つまりこれらの単位は％と同じようにあつかえる
文字の単位に使うとレスポンシブな文字になる
この単位を文字に使った場合画面幅の何パーセントかと決めれば、画面幅に対して常に一定の大きさになる
なのでメディアクエリを使って画面サイズに合わせて文字のサイズを変えること無く、一定の大きさお保ているというもの
最大サイズ・最小サイズはメディアクエリで固定値で決めておいたほうが、いいかもしれない
画面からはみ出ない常に正方形なものにする
vminを使えばviewportの短い方に対しての割合を指定できるので、1500×1000pxだったときに
div {width:100vmin;height:100vmin;}
こうすると、100vminは1500×1000の短い方の1000pxの「100％なので1000pxになるので1000×1000pxの正方形になる
革命的な使い方がパッと思いついていないのですが
大きな可能性を秘めている感じ
あとは画像とかにうまく使えれば、サイズの違った画像を整列させるのに使えるのかな？と思ったり
現在のブラウザの対応はこちらでチェックできます
http://caniuse.com/viewport-units
IE11で完全にサポート 他のブラウザでも最新のものは大体サポートされているようです
参考記事
http://dev.opera.com/articles/view/css-viewport-units/
http://unformedbuilding.com/articles/learn-about-vw-vh-vm/
http://hai3.net/blog/2013/01/07/css-vmin/
COMMENT