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

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

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

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

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

二、我們常用的適配方法

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

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

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

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

2.1 靜態(tài)布局

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

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

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

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

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

2.2 百分比布局

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

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

當(dāng)然我們?cè)诎俜直冗m配過程中也可以規(guī)定其適配的最大或者最小值，達(dá)到規(guī)定值后就不再進(jìn)行適配。這種方式適合于某些短字段的適配，比如樓層或者性別等，不需要占用特別寬的表格，這時(shí)可以將其余的長度留給需要的字段。

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

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

需要注意的是，使用高度適配時(shí)，我們需要考慮當(dāng)前頁面完全的最低高度，比如我們?cè)O(shè)計(jì)的頁面需要在900px的高度下才能完全展示時(shí)，我們的適配起始點(diǎn)需要達(dá)到900px后才開始進(jìn)行高度適配。

2.3 斷點(diǎn)布局

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

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

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

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

2.4 彈性布局

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

因?yàn)檫@種布局會(huì)讓文字隨著變（其他布局的文字都不會(huì)進(jìn)行變動(dòng)），因此如果需要以這種進(jìn)行適配，那么我們?cè)谧鲈O(shè)計(jì)的時(shí)候需要以1366的最小尺寸來進(jìn)行設(shè)計(jì)。因?yàn)槿绻云渌叽鐏碓O(shè)計(jì)的話，就會(huì)出現(xiàn)向下兼容時(shí)字號(hào)小于12px的情況。比如clearlfet就使用了彈性布局：

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

三、如何選擇與交付說明

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

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

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

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

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