為了展示良好的頁面效果，我們需要考慮頁面適配的問題，如果你還在糾結頁面適配規則如何選擇，不妨看看本文關于頁面適配給出的一些方法和選擇，希望能給你一些啟發。

還在糾結頁面適配規則如何選擇的同學建議看看，應該能有收獲。

一、何為頁面適配及必要性

頁面適配，簡單來說就是需要考慮頁面在不同的屏幕尺寸中展示出來的對應效果。其最終目的，就是為了讓我們設計的頁面在每個屏幕尺寸下，都有比較良好的顯示效果。如果不考慮頁面適配，最終的頁面呈現效果就會大打折扣。

在B端實際的工作中，我們只需要關注設計內容在瀏覽器視窗變化時如何呈現就可以了，以及如何運用規則驅動開發進行對應的交付從而保證頁面落地，才是最終目的。

二、我們常用的適配方法

雖然很多資料中都有很多的適配名詞方法，什么流體布局、百分比、漸進增強等等。但這里不必被繁雜的概念繞暈，我們只需要明確，其實真正的分類就兩種：自適應布局和響應式布局。

這兩種方式都可以讓頁面元素隨著視窗的伸縮而進行對應的適配變化，其者唯一的區別就在于開發是否用一套代碼實現（判斷方法：同一個頁面在不同尺寸的屏幕上訪問時，看網址是否一樣，只有一個網址為響應式，有多個不同的網址為自適應）。

而大部分B端產品在很多時候的適配基本都只考慮瀏覽器端的，所以你可以簡單理解為我們目前所使用的適配方式基本都屬于響應式布局。在響應式布局里面又可以分為以下四種布局方式：靜態布局、百分比布局、斷點布局、彈性布局。

只需要掌握好這四種適配方法，我們就能夠根據當前頁面內容選擇合理的適配方式。

2.1 靜態布局

靜態布局，也叫固定布局。意味著內容區域始終是固定不變的，在瀏覽器進行變化的時候，超出的部分則用留白進行顯示。

靜態布局常用的適配方式有居中留白和右側留白：

居中留白指的是頁面內容始終固定居中，兩側進行留白。右側留白指的是頁面內容始終居左顯示，右側進行留白。這兩者其實并沒有明顯使用上的區別，根據自身當前設計情況來使用。

比如使用步驟條且內容居中的頁面，那么在適配時也會使用居中留白：

比如簡單的錄入和配置頁面，那么在適配時則使用居右留白：

2.2 百分比布局

百分比布局也叫流式布局。百分比布局則意味著內容區域在瀏覽器進行變化的時候，寬度或者高度會以固定的比例進行對應變化。

我們先看最常見的寬度適配，在一般頁面適配中我們只需要考慮寬度適配即可，比如我們最常見的表格頁面在進行拉伸的時候就可以進行百分比適配，讓每列的寬度都可以進行均勻增加：

當然我們在百分比適配過程中也可以規定其適配的最大或者最小值，達到規定值后就不再進行適配。這種方式適合于某些短字段的適配，比如樓層或者性別等，不需要占用特別寬的表格，這時可以將其余的長度留給需要的字段。

而高度適配一般情況下會比較少，會應用于當需要頁面信息始終在用戶可視區域內都有比較良好的視覺效果時，這時候可以考慮高度適配。其實高度適配的規則和寬度適配一樣。

在探索的過程中發現大屏類產品在這種適配中使用得比較多，比如阿里機房的產品就使用了這種適配方式：

需要注意的是，使用高度適配時，我們需要考慮當前頁面完全的最低高度，比如我們設計的頁面需要在900px的高度下才能完全展示時，我們的適配起始點需要達到900px后才開始進行高度適配。

2.3 斷點布局

斷點布局則是根據設定的斷點，屏幕內容進行對應的變化。

在設定斷點判斷時，一般需要設計師出對應尺寸的設計圖及說明。我們的斷點設定范圍一般為：1366-1600；1601-1920；1921-2560。

比如我們看到的登錄頁，在不同的屏幕尺寸下顯示的頁面是不相同的，比如火山的登錄頁：

當然除了登錄頁，斷點布局還適用于某些元素在大屏和小屏之間的切換展示，能夠更好的展示該元素。比如側拉詳情的尺寸可以根據不同尺寸而呈現不同寬度。我們只需要掌握斷點的規則，然后根據我們的設計場景調用其適配規則即可。

2.4 彈性布局

彈性布局則是隨著瀏覽器拉伸變化，整體包括文字大小都會跟隨變化的一種布局方式。

因為這種布局會讓文字隨著變（其他布局的文字都不會進行變動），因此如果需要以這種進行適配，那么我們在做設計的時候需要以1366的最小尺寸來進行設計。因為如果以其他尺寸來設計的話，就會出現向下兼容時字號小于12px的情況。比如clearlfet就使用了彈性布局：

這種布局的應用場景則更多用于演講展示等設計場景，能夠根據屏幕尺寸讓整體內容等比放大，獲得更好的展示效果。但彈性布局使用的單位是em來定義元素寬度，而其他幾類布局使用的都是百分比。因此這種布局對于前段開發來說會相對更耗費時間一些。因此如果沒有特別要求，盡量不使用該布局。

三、如何選擇與交付說明

上述已經講了四種類型的區別，那么在實際應用中，我們應該如何選擇對應的適配方式呢。其實關于這塊并沒有一個嚴格的規定，我們可以根據頁面的使用場景根據需求選擇不同的適配方式。

對于填寫或者簡單展示的頁面類型，可以使用靜態布局，比如個人中心、結果頁、表單頁都可以使用；

對于主要展示類型，比如工作臺、看板、卡片列表、數據可視化頁面，我們一般會采用百分比布局與斷點布局結合的方式來適配不同的瀏覽器類型，以達到最好的展示效果；

彈性布局，目前基本很少用，但對于類似需要強調展示或者演講類型的頁面來講還是可以嘗試這種布局的。

當我們選擇了某些適配方式，建議可以提前與開發進行對應的溝通，從而避免某些適配規則會讓開發特別麻煩，而開發也能夠以他的視角來更好的解讀你想要達到的目的。希望能夠對看到的同學有一定的幫助。