css 3適応レイアウト単位vw,vh

転入先https://www.cnblogs.com/luxiaoxing/p/7544375.html
ビューポート単位(Viewport units)
ビューポートとは?
デスクトップの端で、ビューポートはデスクトップの端で、ブラウザの可視領域を指します.一方、移動端では、Layout Viewport(レイアウトビューポート)、Visual Viewport(ビジュアルビューポート)、Ideal Viewport(理想的なビューポート)の3つのビューポートがあります.
ビューポート単位の[ビューポート](Viewport)は、デスクトップ端がブラウザの表示領域を指します.モバイル端末とは、ViewportのLayout Viewportを指します.
CSS 3仕様によると、ビューポート単位は主に以下の4つを含む.

  1.vw：1vw       1%。

  2.vh：1vh       1%。

  3.vmin：  vw vh      。

  4.vmax：  vw vh      。

vh and vw:親要素ではなく、ビューポートの高さと幅に対して(CSSの割合は、それを含む最も近い親要素の高さと幅に対して).1 vhは1/100のビューポート高さに等しく、1 vwは1/100のビューポート幅に等しい.
たとえば、ブラウザの高さ950 px、幅1920 px、1 vh=950 px/100=9.5 px、1 vw=1920 px/100=19.2 pxです.
vmaxは、ビューポートの幅または高さに対して大きいものです.その中で一番大きいのは100単位のvmaxに分けられています.
vminは、ビューポートの幅または高さに対して小さいものです.その中で一番小さいのは平均100単位のvminに分けられます.calcの文法は簡単な4則演算であり、1は「+」、「-」、「/」の4則演算を用いる.2パーセンテージ、px、em、remなどの単位を使用することができる.3各種単位を混合して計算することができる.4式に「+」と「-」がある場合、その前後にスペースが必要です.例えば、「width:calc(12%+5 em)」というスペースのない書き方は間違っています.5式に「」および「/」がある場合は、前後にスペースはありませんが、スペースを残すことをお勧めします.

height: calc(100vh - 290px);
height:-moz-calc(100vh - 290px);
height:-webkit-calc(100vh - 290px);