響應式布局的實現(xiàn)依靠媒體查詢（ Media Queries ）來實現(xiàn)，選取主流設備寬度尺寸作為斷點針對性寫額外的樣式進行適配，但這樣做會比較麻煩，只能在選取的幾個主流設備尺寸下呈現(xiàn)完美適配。
即使是通過 rem 單位來實現(xiàn)適配，也是需要內(nèi)嵌一段腳本去動態(tài)計算根元素大小。
近年來，隨著移動端對視口單位的支持越來越成熟、廣泛，使得我們可以嘗試一種新的辦法去真正地適配所有設備尺寸。
首先，我們要了解什么是視口。
在業(yè)界，極為推崇的一種理論是 Peter-Paul Koch (江湖人稱“PPK大神”)提出的關于視口的 解釋 ——在桌面端，視口指的是在桌面端，指的是瀏覽器的可視區(qū)域；而在移動端較為復雜，它涉及到三個視口：分別是 Layout Viewport（布局視口）、 Visual Viewport（視覺視口）、Ideal Viewport。
而視口單位中的“視口”，在桌面端，毫無疑問指的就是瀏覽器的可視區(qū)域；但是在移動端，它指的則是三個 Viewport 中的 Layout Viewport 。
根據(jù) CSS3規(guī)范 ，視口單位主要包括以下4個：
視口單位區(qū)別于 % 單位，視口單位是依賴于視口的尺寸，根據(jù)視口尺寸的百分比來定義的；而 % 單位則是依賴于元素的祖先元素。
例如，在桌面端瀏覽器視口尺寸為650px，那么 1vw = 650 * 1% = 6.5px（這是理論推算的出，如果瀏覽器不支持0.5px，那么實際渲染結(jié)果可能是7px）。
其兼容性如下圖所示，可以知道： 在移動端 iOS 8 以上以及 Android 4.4 以上獲得支持，并且在微信 x5 內(nèi)核中也得到完美的全面支持。
對于移動端開發(fā)來說，最為重要的一點是如何適配頁面，實現(xiàn)多終端的兼容，不同的適配方式各有千秋，也各有缺點。
就主流的響應式布局、彈性布局來說，通過 Media Queries 實現(xiàn)的布局需要配置多個響應斷點，而且?guī)淼捏w驗也對用戶十分的不友好：布局在響應斷點范圍內(nèi)的分辨率下維持不變，而在響應斷點切換的瞬間，布局帶來斷層式的切換變化，如同卡帶的唱機般“咔咔咔”地一下又一下。
而通過采用rem單位的動態(tài)計算的彈性布局，則是需要在頭部內(nèi)嵌一段腳本來進行監(jiān)聽分辨率的變化來動態(tài)改變根元素字體大小，使得 CSS 與 JS 耦合了在一起。
有沒有辦法能夠解決這樣的問題呢？
答案是肯定的，通過利用視口單位實現(xiàn)適配的頁面，是既能解決響應式斷層問題，又能解決腳本依賴的問題的。
在僅使用 vw 單位作為唯一應用的一種 CSS 單位的這種做法下，我們遵守：
1.對于設計稿的尺寸轉(zhuǎn)換為vw單位，我們使用Sass函數(shù)編譯
2.無論是文本還是布局高寬、間距等都使用 vw 作為 CSS 單位
3.1物理像素線（也就是普通屏幕下 1px ，高清屏幕下 0.5px 的情況）采用 transform 屬性 scale 實現(xiàn)。
4.對于需要保持高寬比的圖，應改用 padding-top 實現(xiàn)
由此，我們能夠?qū)崿F(xiàn)一個常見布局的頁面效果如下：
這樣的頁面雖然看起來適配得很好，但是你會發(fā)現(xiàn)由于它是利用視口單位實現(xiàn)的布局，依賴于視口大小而自動縮放，無論視口過大還是過小，它也隨著視口過大或者過小，失去了最大最小寬度的限制。
當然，你可以不在乎這樣微小的不友好用戶體驗，但我們還是嘗試下追求修復這樣的小瑕疵吧。
于是，聯(lián)想到不如結(jié)合rem單位來實現(xiàn)布局？rem 彈性布局的核心在于動態(tài)改變根元素大小，那么我們可以通過：
這樣我們就能夠?qū)崿F(xiàn)對布局寬度的最大最小限制。因此，根據(jù)以上條件，我們可以得出代碼實現(xiàn)如下：
這里就不再給出截圖，但你可以 點擊此處在線地址 進行體驗。
相對于做法一，個人比較推崇做法二，有以下兩點原因：
第一，做法二相對來說用戶視覺體驗更好，增加了最大最小寬度的限制；
第二，更重要是，如果選擇主流的rem彈性布局方式作為項目開發(fā)的適配頁面方法，那么做法二更適合于后期項目從 rem 單位過渡到 vw 單位。只需要通過改變根元素大小的計算方式，你就可以不需要其他任何的處理，就無縫過渡到另一種CSS單位，更何況vw單位的使用必然會成為一種更好適配方式，目前它只是礙于兼容性的支持而得不到廣泛的應用。
聯(lián)系客服
