Css 網頁符合瀏覽器大小

Viewport Percentage Lengths

Viewport Percentage Lengths 有四個不同的單位，分別如下：

• vh (viewport height): 瀏覽器高度百分比。
• vw (viewport width): 瀏覽器寬度百分比。
• vmin (viewport minimum length): vh 與 vw 中較小的值。
• vmax (viewport maximum length): vh 與 vw 中較大的值。

如果想要讓某個元素佔滿整個瀏覽器，就只要像下面這樣寫，很簡單的：

div {
  width: 100vw;
  height: 100vh;
}

100vh 與 100% 的差別

先舉個例子，讓外層 div 的高度只有 50px，內層 p 的高度分別為 100% 與 100vh，前者會是上一層的高度的百分比，後者是瀏覽器高度的百分比。

<div id="one">
  <p>100% Height</p>
</div>

<div id="two">
  <p>100vh Height</p>
</div>

div {
  height: 50px;
}

#one > p { height: 100%; }
#two > p { height: 100vh; }

See the Pen viewport by AkiiCat (@AkiiCat) on CodePen.

vmin 與 vmax 的差別與用法

假設現在瀏覽器的高是 1100px 寬是 700px，這樣 1vh 1vw 就會是 11px 7px。

• 1vmin 的定義是 1vh 和 1vw 中最小的值，所以 1vmin 就會是 7px。
• 1vmax 的定義是 1vh 和 1vw 中最大的值，所以 1vmax 就會是 11px。

如果讓 div 的寬與高都是 100vmin：

div {
  width: 100vmin;
  height: 100vmin;
}

如果讓 div 的寬與高都是 100vmax：

div {
  width: 100vmax;
  height: 100vmax;
}