認識視口單位（ Viewport units )首先，我們要了解什麼是視口。在業界，極為推崇的一種理論是 Peter-Paul Koch (江湖人稱“PPK大神”)提出的關於視口的解釋——在桌面端，視口指的是在桌面端，指的是瀏覽器的可視區域；而在移動端較為複雜，它涉及到三個視口：分別是 Layout Viewport（佈局視口）、 Visual Viewport（視覺視口）、Ideal Viewport。而視口單位中的“視口”，在桌面端，毫無疑問指的就是瀏覽器的可視區域；但是在移動端，它指的則是三個 Viewport 中的 Layout Viewport 。視口單位中的“視口”·根據CSS3規範

，視口單位主要包括以下4個：

• vw : 1vw 等於視口寬度的1%
• vh : 1vh 等於視口高度的1%
• vmin : 選取 vw 和 vh 中最小的那個
• vmax : 選取 vw 和 vh 中最大的那個

視口單位區別於%單位，視口單位是依賴於視口的尺寸，根據視口尺寸的百分比來定義的；而%單位則是依賴於元素的祖先元素。用視口單位度量，視口寬度為100vw，高度為100vh（左側為豎屏情況，右側為橫屏情況）例如，在桌面端瀏覽器視口尺寸為650px，那麼 1vw = 650 * 1% = 6.5px（這是理論推算的出，如果瀏覽器不支援0.5px，那麼實際渲染結果可能是7px）。相容性其相容性如下圖所示，可以知道：在移動端

ios 8 以上以及 Android 4.4 以上獲得支援，並且在微信 x5 核心中也得到完美的全面支援。