CSSのビューポート単位

過去数年間、応答デザインは、Webデザインコミュニティでは非常にホットな話題になっている.より高速な応答設計を構築するのに役立つ様々なフレームワークがあります.つの方法の1つは、Viewport percentage unitsまたは“Viewportユニット”を使用して、ショートカット、あなたの応答設計のいくつかの側面を自動化するのに役立ちますCSS 3のプロパティです.
ビューポート単位を使用すると、特定の要素のサイズがブラウザのサイズを変更できます.
ピクセル、emまたはパーセント値の代わりに、これらの設定を使用できます.

VW :ブラウザの幅

のパーセンテージ

VH :ブラウザの高さ

のパーセンテージ

VMIN :ブラウザの高さまたは幅の最小パーセンテージ、

の最小値

vmax :ブラウザの高さまたは幅の最大パーセンテージ、

の最小値
これらのユニットは、幅、高さ、マージン、フォントサイズなどの値を受け入れるCSSプロパティで使用することができます.ウィンドウのサイズ変更やデバイスの回転でブラウザで再計算されます.

その利点を概観しましょう。

ページの全高

伝統的に、我々は、画面に収まるようにコンテナの完全な高さを得るためにheight:100%を使用している.vhを使用することで、少ないコードで同じ結果を得ることができます.これは、ユーザーの画面の高さにイメージを拡大するのを助けます.View demo in codepen .違いを見るために、100 VhをCodepenデモで100 %と取り替えてください.

.image-container {
  height: 100vh;
  width: auto;
}

画面より小さい要素を保つ

この手法は、ビューポートのサイズに比例して要素の高さを明示的に制御したい場合は、常にビューのままになります.View demo in codepen

テキストのスケーリング(応答テキスト)

このテクニックを使用すると、フォントサイズを調整するときに開発者の偉大な柔軟性を与え、彼らはビューポートのサイズで動的にスケールするのに役立ちます.簡単に実行するには、基本的なフォントサイズをルート要素に配置し、ルート要素のフォントサイズでビューポート単位を使用し、それをスケールします.
Media queriesは、いろいろなスクリーンサイズの向こうで読みやすさを確実にするために、きれいにvw unitsと結合します.View demo in codepen .基本フォントサイズ(HTML)値を変更してみてください.

html {
  font-size: 20px;
}

h1 {
  font-size: calc(100% + 5vw); 
}

容器から出る

ビューポート単位で、要素または要素の外部を破ることができます.CMSがHTMLテンプレート内のマークアップを変更することが困難または不可能になるシナリオでは、ビューポート単位を使用するとマークアップに関係なく望ましい結果が得られます.このテクニックは、すべてのシナリオでは動作しませんが、いくつかの例では良いトリックです.
View demo in codepen

.container {
  max-width: 1024px;
  margin: 0 auto;
}

.breakout { 
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
  width: 100vw; 
}

見ることができるように、すべての主要なWebブラウザ全体でビューポートユニットのための固体サポートがあります.しかし、いくつかのバグを越えて実行することがあります.あなたのデザインでより新しいテクニックを実行する前に、caniuseをチェックするのは常に良い習慣です.

結論

これまで来て、私はあなたがすでにポートポート単位を愛していることを望みます.そして、個人的に、私はViewport単位が装置の広い範囲にぴったり合うと言うことができます.私はあなたがそれをあなたのプロジェクトで試してみて、探索し、お楽しみください!
このブログをとても参考にしてください.お気軽にあなたの考えや意見を共有し、私に何か問題や質問があればコメントを残してください.
ハッキング続ける!歓声