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

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

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

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

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

二、我們常用的适配方法

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

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

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

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

2.1 靜态布局

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

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

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

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

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

2.2 百分比布局

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

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

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

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

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

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

2.3 斷點布局

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

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

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

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

2.4 彈性布局

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

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

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

三、如何選擇與交付說明

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

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

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

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

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

本文由 @蒙東東 原創發布于人人都是産品經理，未經許可，禁止轉載

題圖來自Unsplash，基于 CC0 協議

該文觀點僅代表作者本人，人人都是産品經理平台僅提供信息存儲空間服務。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部