視窗(viewport)單位
視窗(viewport)單位是相對單位，意味著它們沒有客觀的尺寸。它們的大小是由視窗(viewport)大小決定的。下面是四個與視窗(viewport)有關的單位。
我將集中討論前兩個單位，因為它們更可能被使用。
在很多情況下，視口單位(vh和vw)和百分比單位在它們可以實現的功能方面是重疊的。然而，它們每個都有其明顯的優點和缺點。概括的說:
當處理寬度的時候，%單位更合適。處理高度的時候，vh單位更好。
佔滿寬度的元素: % > vw
正如我所提到的，vw單位根據視窗的寬度決定它的大小。然而，瀏覽器是根據瀏覽器的視窗計算視窗大小的，包括了滾動條的空間。
如果頁面延伸超過視口的高度——滾動條出現——視窗的寬度將會大於html元素的寬度。
viewport > html > body
因此，如果你將乙個元素設定為100vw,這個元素將會延伸到html和body元素範圍之外。在這個例子中，我用紅色邊框包裹html元素，然後給section元素設定背景顏色。
因為這個細微的差別，當使乙個元素橫跨整個頁面的寬度時，最好使用百分比單位而不是視口的寬度。
佔滿高度的元素:vh > %
在另一方面，當使乙個元素跨越整個頁面的高度時，vh遠比百分比單位好。
因為用百分比定義的元素的大小是由它的父元素決定的，只有父元素也填滿整個螢幕的高度時我們才能擁有乙個填滿整個螢幕的高度的元素。這通常意味著我們不得不把元素定位成固定的，為了使元素的父元素為html元素，或者依賴一些程式。
然而，用vh的話，就像下面寫的那麼簡單：
css code複製內容到剪貼簿
.example , 1000);
在區域內的
vh單位也可以用來控制在頁面內的的大小。例如，在一篇文章中，我們可能想要任何的可以在頁面上被完整的檢視，不過螢幕的大小為多少。
做到這一點，我們可以這樣解決:
css code複製內容到剪貼簿
img {
width: auto; /* 寬度根據高度按比例調整*/
max-width: 100%; /* 不超過父元素的寬度 */
max-height: 90vh; /* 不超過視口的高度 */
margin: 2rem auto;
CSS百分比單位總結
css中的很多地方都是可以使用百分比單位的，之前一直理所當然的認為百分比就是相對於容器的寬高設定的，後來在自己實現垂直居中的多種寫法時，才意識到這個問題，遂收集資料進行整理。相對於容器的寬度的 相對於content box寬度 width max width min width margin pad...
CSS中百分比單位計算方式整理
整理於 相對于父元素的font size來計算，如果父元素 以及它的祖先元素 未顯式設定font size值的話，將會以瀏覽器的預設值16px為基準。基於元素自身的font size的值來計算。如果元素自身未顯式設定font size，則會基於元素繼承過來的font size的值計算。基於元素自身的...
css中的視窗單位
視窗是瀏覽器實際顯示內容的區域 換句話說是你的不包括工具欄和按鈕的網頁瀏覽器。這些單位是vw,vh,vmin和vmax。它們都代表到了瀏覽器尺寸的比例和視窗的大小調整產生的規模改變。比如有乙個1000px 寬 和800px 高 的視窗 viewport 可以在任何乙個可以使用畫素值的地方使用它們，比...