先日の記事「フォントサイズの指定方法(翻訳版)」で、CSSの比較的新しい単位「ビューポートの単位(Viewport Units)」について触れました。この単位「vw, vh, vmin, vmax」はブラウザのビューポートのサイズに基づくもので、これらの単位で指定した実際の大きさはビューポートの大きさによって変化するため、レスポンシブデザインにあった単位と言えるでしょう。
これらの単位を使うことは「フォントサイズの指定方法」でフォントサイズに使うことを反対しましたが、レイアウトでは非常に役立つ単位です。
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。
ビューポートの単位(Viewport Units)とは
ビューポートの単位は相対的な単位で、それ自身が客観的な大きさを持っていないことを意味し、ビューポートのサイズによって決定されます。ビューポートと関係がある単位は、4種類です。
- vw
- ビューポートの幅の1/100
- vh
- ビューポートの高さの1/100
- vmin
- ビューポートの幅か高さの値が小さい方の1/100
- vmax
- ビューポートの幅か高さの値が大きい方の1/100
これら4種類の単位の中で使い勝手がよい最初の2つ(vw, vh)にフォーカスします。多くのケースでこのビューポートを使った単位とパーセントを使った単位は似ていますが、それぞれ明確な長所と短所を持っています。
簡単に言うと、幅を扱う時は「%」、高さを扱う時は「vh」の方が適切です。
...詳しい情報・続きはこちら >>
http://coliss.com/articles/build-websites/operation/css/viewport-vs-percentage-units-by-ire.html
─情報元:コリスサイト様─