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

還在糾結(jié)頁面適配規(guī)則如何選擇的同學(xué)建議看看，應(yīng)該能有收獲。

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

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

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

二、我們常用的適配方法

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

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

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

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

2.1 靜態(tài)布局

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

靜態(tài)布局常用的適配方式有居中留白和右側(cè)留白：

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

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

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

2.2 百分比布局

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

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

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

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

在探索的過程中發(fā)現(xiàn)大屏類產(chǎn)品在這種適配中使用得比較多，比如阿里機房的產(chǎn)品就使用了這種適配方式：

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

2.3 斷點布局

斷點布局則是根據(jù)設(shè)定的斷點，屏幕內(nèi)容進行對應(yīng)的變化。

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

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

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

2.4 彈性布局

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

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

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

三、如何選擇與交付說明

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

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

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

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

當我們選擇了某些適配方式，建議可以提前與開發(fā)進行對應(yīng)的溝通，從而避免某些適配規(guī)則會讓開發(fā)特別麻煩，而開發(fā)也能夠以他的視角來更好的解讀你想要達到的目的。希望能夠?qū)吹降耐瑢W(xué)有一定的幫助。