大家好，歡迎來到停止重構的頻道。

本期討論網頁UI布局。

網頁UI布局是前端開發中占比較多的部分，做完網頁布局也就差不多完成了一半的工作。

本期視頻，我們不再討論基礎的UI布局。

我們希望滿足響應式布局，一份代碼適配PC/平板/手機等多端設備，希望盡可能適配視窗/內容變化。

我們按以下順序展開討論

1. 網頁布局核心問題
2. 視窗變化
3. 內容變化
4. 我們的解決方案

網頁布局核心問題

我們先拋開一切解決方案，觀察網頁布局本身。

一個網頁像是一個大盒子，上面整齊放著小盒子或零件，小盒子中又可以放小盒子或零件。

如果所有的零件和盒子尺寸都是固定的，網頁布局將是較為簡單的工作，基本上就是將UI設計圖翻譯為HTML語言，甚至很多UI設計工具都可以直接導出HTML文件。

但是，現實的前端開發工作并不是這么簡單的事情，核心問題是，網頁布局中的這些盒子和零件的尺寸是變化的。

尺寸變化的問題又分為視窗變化和內容變化，以下將分別討論其解決方案。

視窗變化

首先是視窗變化。

整個網頁的大盒子，也就是網頁的視窗是變化的。

比如僅僅用作PC端的網頁，最終運行的視窗尺寸也是有變化的，因為用戶顯示器的尺寸不是固定的，而且PC瀏覽器的窗口大小也可以隨意調整。

如果一個網頁僅用于PC端或者手機端，即使視窗尺寸有所浮動，網頁的整體布局一般是不需要有太大變化的，一般只需要微調局部，讓內容可以正常顯示。

但是，如果一個網頁需要同時適配手機/平板/PC等多端的話，則可能會引起整體網頁布局的變化。

以我們的手冊網頁為例，PC網頁是左目錄右內容，手機網頁是上目錄下內容，且詳細目錄需要隱藏起來。

這里需要特別說明的是，手機/平板/PC多端適配的前提，是網頁結構是類似的。

比如僅僅是換一下區域的位置，或者僅僅需要某幾個區域建立分身做特殊適配。

若網頁特別復雜，且PC/手機網頁的設計風格完全不一致的話，則適配工作量會非常大，還不如獨立分開PC/手機端網頁。

針對視窗的變化，我們一般是根據視窗寬度調整CSS樣式。

視窗的寬度我們推薦以下幾個梯度，其中視窗寬度小于768px的話，一般為手機等移動設備。需要考慮是否重新調整網頁整體布局。

這里有個點需要注意，移動設備一般是可以橫向、縱向旋轉的。

以IPhone為例，豎著的時候，視窗寬度為390px 橫著的時候，視窗寬度為844px。

所以，768px這個移動設備分水嶺并不是絕對的，需要根據具體項目的適配要求而定。

這里需要補充說明的是，屏幕分辨率尺寸和瀏覽器視窗尺寸并不是完全等效的。

根據系統設置，一般1-3個物理像素等于1個網頁視窗像素，比如iPhone的橫向分辨率為1170，其瀏覽器視窗寬度為390px。

如果網頁需要在移動設備運行，HTML的head中需要添加meta標識，不然網頁會自動縮小。

針對視窗變化，一般是在CSS設置中，通過@media篩選視窗寬度進行樣式覆蓋，在網頁開發調試時，需要測試這些推薦梯度下網頁是否正常。

內容變化

接下來是內容變化。

網頁的局部內容并不都是固定的，特別是某些內容是從服務端獲取的。

比如需要做一個信息卡片的布局，左邊的圖片需要固定為25%的寬度，且長寬比為1:1，圖片高度也決定了整個卡片的高度。

標題旁邊需要緊挨著標簽，說明區域占據一行且貼緊底部，內容區域自動占滿剩余高度。

若按照經典的布局方式，比如float、flex等布局方式。

會非常的麻煩，需要一層一層設置下來，且樣式改版時非常麻煩。

那有沒有一種更為直觀的方式，更貼近表格的布局方式呢。

這里推薦使用Grid布局，Grid布局的詳細語法非常豐富，但是我們只推薦這樣的做法：

我們希望先規劃好網格的尺寸，然后通過標識綁定具體的網格區域。

以上面的信息卡片為例子，我們需要先規劃好網格，包括行高、列寬、區域標識。

對應的CSS代碼為，在最外層元素的CSS樣式上開啟grid布局，且通過grid-template設置網格行高、列寬、區域標識，通過gap設置網格間的間隙。

具體的子區域通過區域標識綁定，即可插入對應的位置。

相比于經典的flex、float布局，Grid布局的HTML結構也更加簡潔。

這里需要補充說明的是，在網格設置中 行高、列寬中包含了2個較為特殊的單位：auto和fr。

auto指的是，自動適配區域內部的寬度或者高度，比如標題title的寬度設置為auto，則標簽的位置會自動根據標題的寬度自動左右移動。

fr指的是，自動占滿剩下的區域寬度或者高度，比如內容content高度設置為1fr，則自動填充剩余高度。

若說明區域也設置為1fr，則內容和說明區域平分剩余高度。

若說明區域設置為2fr，則說明區域的高度將會是內容高度的兩倍。

Grid布局的好處十分明顯，可以在一個地方管理網格設置。在修改網格布局時，會非常的清晰方便， HTML結構也更簡單易懂。

比如，信息卡片在手機端需要改變布局方式，可以簡單地設置手機布局樣式，而不需要修改子區域的樣式。

值得一題的是，僅通過調整布局來適配所有視窗是不現實的，某些區域可能需要建立分身進行特殊適配，在不同的視窗寬度顯示不同的分身。

當然，Grid布局也有局限性，就是老舊瀏覽器對其支持有限。

老舊瀏覽器一般也就是IE11及之前版本，若網頁沒有IE的適配要求，則可以放心地使用Grid布局。

我們的解決方案

以上是原生CSS解決方案。

在我們的前端框架Trick2中，也更新了_BoxGrid組件，通過設置組件參數，即可快速實現Grid布局。

另外，為了適配復雜的多層布局，組件參數允許嵌套設置，快速實現多層布局。

一些時候，若需要給某些區域添加a標簽跳轉，這個組件也提供了_as參數，可以設置為a標簽，并直接設置跳轉路徑。

總結

以上就是我們目前比較推薦的UI布局方式，這種方式最為直觀，更接近直覺中網頁是一個表格的感覺。

這里強調一下，我們并非推薦網頁布局僅使用Grid布局，而是推薦在全局或者大片區域的布局上使用Grid布局，小局部可能使用經典的flex、float等布局方式更為方便。

在兩年前，我們也討論過響應式布局，但在這兩年的實踐中，我們發現Grid布局實現起來更為簡單直觀，維護起來也更加方便。