css3中vh是什么意思

在css3中，vh是“視窗高度百分比”的意思，是一種視窗單位，也是相對單位；vh是相對于視窗的高度而定的，視窗就是客戶端瀏覽器的可視區域，視窗被均分為100個單位，1vh的大小是視窗高度的百分之一。

本教程操作環境：windows10系統、CSS3&&HTML5版、Dell G3電腦。

css3中vh是什么意思

vh是相對視口（viewport）的高度而定的，1vw 等于1/100的視口寬度。

在客戶端，視口指的是瀏覽器的可視區域；

而在移動端，它涉及3個視口：Layout Viewport（布局視口），Visual Viewport（視覺視口），Ideal Viewport（理想視口）。指的就是Layout Viewport, “視區”所指為瀏覽器內部的可視區域大小，即window.innerWidth/window.innerHeight大小，不包含任務欄標題欄以及底部工具欄的瀏覽器區域大小。

vh單位可以根據窗口的高度自動改變大小，1vh是窗口高度的1%；

vw和vh是相對于視口（viewport，也可以叫做視區、視界或可視范圍）的寬度和高度。

擴展知識：

vw: 視口寬度的百分比（1vw 等于視口寬度的 1%）

vh: 視口高度的百分比（1vh 等于視口高度的 1%）

vmin: 選取 vw 和 vh 中最小的那個

vmax: 選取 vw 和 vh 中最大的那個

vw、vh 是基于視口的，而不是父元素。1vw 等于1/100 的視口寬度，1vh 等于1/100 的視口高度，比如：

瀏覽器高度 950px，寬度為 1920px, 1vh = 950px/100 = 9.5 px，1vw = 1920px/100 =19.2 px

vw、vh、％ 的區別

％ 是相對于父元素的大小設定的比率，vw vh 是視口大小決定的

vw、vh 能直接獲取高度，而 ％ 如果沒有設置body的高度情況下，是無法獲取可視區域的高度。

（學習視頻分享：css視頻教程）