CSSのvm、vh、vmin、vmaxって何?パーセントのようなそうではない単位

viewprt vm vh vmin vmax
このエントリーをはてなブックマークに追加
PR

色々なコードを見ていると、時々 「これ知らない!」 ってなるのでその都度調べて学習していくスタイルなんですが
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/

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)