一文了解各種布局的相關知識，在與前端開發對接時掌握設計話語權。
B端設計可能是下一個風口，目前內卷也很嚴重，由于B端設計師中很多都不太了解前端的技術，這次給大家分享一下最近學習和整理的網頁布局相關的知識，本文會從B端設計師的視角帶大家了解各種布局的知識點，讓我們設計小伙伴在和開發的溝通中有一定話語權。
開發崗位種類和入門知識
開發崗位分成前端工程師和后端工程師。
后端開發工程師主要職責是平臺設計、接口設計和功能實現，在日常工作中與我們設計師的交流不太多。
作為UI設計師的我們，在工作中最常打交道的就是前端工程師。前端開發主要工作是將UI設計師的高保真設計稿通過代碼轉化成可用的前端頁面。前端開發又可細分為web前端開發、原生iOS開發和原生安卓開發。前端開發主要是用JS+CSS完成頁面的構建。
這里簡單介紹一下JS、CSS和HTML。
HTML（ ）是超文本標記語言。超文本就是超越文本的意思，表示它不僅僅是簡單的文本，它比普通的 .txt 文件要高級。這些記號超越了普通文本的標記，它們對普通文本的修飾，構成了一套規則，這套規則就是 HTML。
以蓋房子類比，必須定義這個房子有多長、多寬，每一塊面積如何規劃，例如哪里是衛生間、哪里是飯廳、哪里是臥室。將這些定義好，網頁也就有了最基本的樣子。
CSS（ Style ）是級聯樣式表。CSS 中的“樣式”就是指外觀。還以蓋房為例，定義好了各個空間，房子也蓋起來了，但還要裝修，例如給客廳貼壁紙、給臥室鋪地板。CSS 就是起裝修作用的，要和 HTML —起配合使用。
是一種腳本語言，主要用于前端頁面的 DOM 處理。房子已經裝修好，貼上了墻紙，鋪上了地板，桌子、板凳、沙發都已經擺好，一切都很完美。可是，一個有生活情趣的住戶時常要買些新家具，或者把茶幾換個位置，這時，移動、添加、減少物件就只能靠 實現。
前端開發CSS單位
前端開發人員所使用的CSS單位包含很多種，我們設計師只需要了解所有單位分成兩類，絕對單位和相對單位。網頁設計中最常使用的單位px像素，就是一種絕對單位。
絕對長度單位是固定的，用任何一個絕對長度表示的長度都將恰好顯示為這個尺寸。設置寬度為2px，不管屏幕變大還是變小都始終顯示2px。
相對長度單位規定相對于另一個長度屬性的長度。相對長度單位在不同渲染介質之間縮放表現得更好。
布局種類介紹
固定&靜態布局
頁面保持固定的寬度，不會根據瀏覽器或顯示器的寬度大小而變化。開發使用像素這種絕對單位作為單位，頁面按照精確像素展示。
固定布局屬于前20年的技術產物，由于當時的科技水平有限，使用的純平顯示器尺寸類型都較固定，所以當時很多網頁都使用的是固定布局。
設計簡單，不需要考慮屏幕尺寸的限制，使用一種固定的尺寸進行設計即可。
開發簡單，不需要考慮屏幕尺寸的適應問題。
小屏幕時需要左右滾動才能看到全部內容，大屏幕時兩側留白較多，空間浪費。
目前部分網頁依然會使用固定布局設計開發，常見于一些新聞門戶類網站，這一類網頁以大量的圖片和文字資訊為主，如：新浪網、中華網
固定布局形式適合一些新聞門戶類等文字內容很多的網站，設計師在設計過程中可以定義一種適合瀏覽的頁面內容區寬度，通常設置為，內容區域居中兩側空間留白。
流式布局
流式布局（）的特點（也叫"Fluid") 是頁面元素的寬度按照屏幕分辨率進行適配調整，但整體布局不變。網頁中主要的劃分區域的尺寸使用百分數。
頁面中主要的劃分區域的尺寸使用百分數（搭配min-*、max-*屬性使用），例如，設置頁面主體的寬度為80%，min-width為960px。圖片也作類似處理（width:100%, max-width一般設定為圖片本身的尺寸，防止被拉伸而失真）。
布局保持不變，內容跟隨頁面寬度變化去做變化，內容會在大屏和小屏幕之間的寬度變化而變化，能夠適應大屏和小屏之間的顯示。
內部字體無法跟隨變化大小
如果屏幕尺度跨度太大，那么在相對其原始設計而言過小或過大的屏幕上不能正常顯示。
阿里云網頁版在低于750px分辨率時采用流式布局方式。
流式布局在設計中使用頻率較少，在設計中需要注意寬度變化后導致的內容高度變化，設計時可以考慮做一種最大寬度的效果和最小寬度的效果。
自適應布局
自適應布局是分別為不同的屏幕分辨率定義布局，即創建多個靜態布局，每個靜態布局對應一個屏幕分辨率范圍。改變屏幕分辨率可以切換不同的靜態局部（頁面元素位置發生改變），但在每個靜態布局中，頁面元素不隨窗口大小的調整發生變化。可以把自適應布局看作是靜態布局的一個系列。
在多個不同尺寸設備終端下查看網頁內容，并且在小屏幕下也能保證相對好的閱讀體驗，對于不同的分辨率能夠靈活的進行操作應用
通過單一的URL地址收集所有的社交分享鏈接。你可以為創建更好、更友好的網站而做出積極貢獻。
設計工作量大，需要根據不用的頁面設計不同寬度的設計稿
頁面存在多個版本，每個版本都必須單獨更新。通常，設計師需要針對6種最常見的屏幕寬度進行設計。320、480、760、960、1200和。而且，這個數字還在不斷增長，這使得設計師在現場維護方面的工作變得更加艱辛和耗時。
在自己的頁面中使用了部分寬度自適應的方法，與使用自適應網頁設計的其他網站類似，亞馬遜更加鼓勵用戶下載其官方APP。據報道，通過采用自適應設計，亞馬遜移動端的訪問速度比以往的響應式網頁設計提高了40%。
對于UI設計師而言，一旦團隊確定使用自適應布局開發產品，就需要做多套設計稿尺寸。對于自適應布局而言，就是根據不同的頁面寬度加載不同的頁面。
常用的設計尺寸使用600, 840, 960, 1280, 1440, 和作為斷點，這里的斷點個數和尺寸可以根據實際情況靈活去變化，主要是根據目前終端所在的寬度進行選擇，例如產品目標用戶使用筆記本的數量多，可以將1366作為斷點。
響應式布局
隨著CSS3出現了媒體查詢技術，又出現了響應式設計的概念。響應式設計的目標是確保一個頁面在所有終端上（各種尺寸的PC、手機、手表、冰箱的Web瀏覽器等等）都能顯示出令人滿意的效果。
對CSS編寫者而言css響應式布局媒體查詢，在實現上不拘泥于具體手法，但通常是糅合了流式布局+彈性布局，再搭配媒體查詢技術使用。——分別為不同的屏幕分辨率定義布局，同時，在每個布局中，應用流式布局的理念，即頁面元素寬度隨著窗口調整而自動適配。即：創建多個流體式布局，分別對應一個屏幕分辨率范圍。可以把響應式布局看作是流式布局和自適應布局設計理念的融合。
響應式布局設計產品能夠給用戶帶來無縫的體驗感，無論使用哪種設備（臺式機，移動設備等），訪客都將獲得相同的無縫體驗。即使當它們從一種設備過渡到另一種設備時，也會給人一種熟悉和信任的感覺。
對于B端產品來說，跨終端辦公是今后的趨勢。那么響應式設計對于B端產品來說尤為重要，實現同一個頁面在pc和pad上都能夠流暢查看且操作。
響應式網頁設計最大的擔憂之一是加載時間。響應性網站會為所有設備加載信息，而不僅僅是訪問者正在查看您網站的設備信息。
要匹配足夠多的屏幕大小，工作量很大，設計也需要多個版本。
蘋果官網
與自適應一樣，對于UI設計師而言，一旦團隊確定使用響應式布局開發產品，就需要做多套設計稿尺寸。每套設計稿在不同尺寸下設計元素以及導航要發生相應變化，比如在寬度縮小到750，考慮設備為移動端，內容在設計側考慮移動端規范，需要遵循移動端的導航與用戶習慣。
在實操過程中css響應式布局媒體查詢，我們需要更多分析競品以及采用響應式布局的其他產品頁面，并且能夠熟悉掌握各個終端的設計規范。
B端Ant系統的響應式介紹
目前有很多大廠商都出了自己的B端系統，如Arco、。解讀響應式設計，大家可以根據需要尋找適合的案例，畢竟我們是要了解背后的規則，我在這里選擇了 的布局相關規范。
Ant 中，主要應用了兩種典型的適配布局形式，左右布局和上下布局，響應式規則主要作用在工作區中的內容區域中。
在這個區域中，Ant 采用了 24 列柵格（）、23 列水槽（）的柵格系統。其中水槽數值是固定的，內容區域減去 23 列間隔后，剩下的部分等分成 24 個格線。
柵格系統的基礎應用，就是對內容模塊分配指定數值的 “列”，比如一個組件的寬包含 3 列、4列、或者 12列。也就是說，在同一行中，總共包含 24 列，橫向的元素按照設計師設計的大小比例平分這24列。
所以通過 Ant 的框架來完成 B 端頁面的響應式設計，就是創建好畫布以后，在需要響應式的區域創建出對應尺寸的24柵格系統，然后在該柵格體系內定義寬高、間距即可，Ant 的框架會自動幫助我們完成響應的功能。
比如，一開始設計的頁面中，創建了 的畫布，使用左右布局的形式，左側使用 200px 寬的導航欄，導航欄采用固定布局，不參與柵格的計算區域。右側區域寬度為 ，間距為 8px，列寬就是 42px。
在這之后，內部層次更低的表格、輸入框、標簽欄等元素也會對應實現響應的效果……
網頁設計策略
不同斷點間屏幕上的界面相互切換適應的策略有：展現、轉變、分割、重排、擴展和移位。
1、展現，小屏幕上隱藏的UI信息在屏幕增大時可以展現出來，如下圖所示本來隱藏在手機側邊導航中的菜單項在平板的左側直接顯示出來了。這一點也和以600為分界的策略相呼應，在更大的屏幕上直接顯示出兩級信息：
2、轉變，界面元素從一個組件變為另一個組件，這一點也說明組件的使用并不是一成不變的，可以根據屏幕的大小選擇合適的組件。如下圖所示，側邊導航的菜單項可能在大屏上顯示為標簽；小屏幕上的文字列表項可以在大屏上顯示為圖片網格列表：
3、分割，分層的信息在一個大的空間里鋪開：
4、重排，界面元素可以重新排布以填滿新的空間：
5、拓展，界面元素在大屏幕上展開為更大的尺寸：
6、移位，界面元素調整到更合適的位置：
總結