2023年B端細(xì)節(jié)-聊聊頁面常用的適配方法及選擇

B端細(xì)節(jié)——聊聊頁面常用的適配方法及選擇還在糾結(jié)頁面適配規(guī)章如何選擇的同學(xué)建議看看，應(yīng)當(dāng)能有收獲。

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

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

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

二、我們常用的適配方法

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

這兩種方式都可以讓頁面元素隨著視窗的伸縮而進(jìn)行對應(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ù)當(dāng)前頁面內(nèi)容選擇合理的適配方式。

2.1靜態(tài)布局

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

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

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

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

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

2.2百分比布局

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

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

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

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

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

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

2.3斷點布局

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

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

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

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

2.4彈性布局

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

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

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

三、如何選擇與交付說明

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

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

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

彈性布局，目前基本很少用，但對于類似需要強(qiáng)調(diào)展現(xiàn)或者演講