響應式布局的實現依靠媒體查詢（ Media Queries ）來實現，選取主流設備寬度尺寸作為斷點針對性寫額外的樣式進行適配，但這樣做會比較麻煩，只能在選取的幾個主流設備尺寸下呈現完美適配。

即使是通過 rem 單位來實現適配，也是需要內嵌一段腳本去動態計算根元素大小。·

近年來，隨著移動端對視口單位的支持越來越成熟、廣泛，使得我們可以嘗試一種新的辦法去真正地適配所有設備尺寸。

認識視口單位（ 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 內核中也得到完美的全面支持。

利用視口單位適配頁面

對于移動端開發來說，最為重要的一點是如何適配頁面，實現多終端的兼容，不同的適配方式各有千秋，也各有缺點。

就主流的響應式布局、彈性布局來說，通過 Media Queries 實現的布局需要配置多個響應斷點，而且帶來的體驗也對用戶十分的不友好：布局在響應斷點范圍內的分辨率下維持不變，而在響應斷點切換的瞬間，布局帶來斷層式的切換變化，如同卡帶的唱機般“咔咔咔”地一下又一下。