本文主要介紹了響應(yīng)式布局設(shè)計(jì)的概念和發(fā)展趨勢(shì)，以及在實(shí)際項(xiàng)目中的應(yīng)用場(chǎng)景和實(shí)現(xiàn)方法。

今天分享的是「響應(yīng)式設(shè)計(jì)」。

隨著科技的不斷進(jìn)步，用戶對(duì)于在線體驗(yàn)的需求也日益增長(zhǎng)。在這個(gè)數(shù)字化時(shí)代，我們生活的每一個(gè)角落都充滿了屏幕—一從智能手機(jī)到平板電腦，再到大型顯示器和電視，這些屏幕的尺寸和分辨率各異，要求我們的設(shè)計(jì)必須能夠靈活適應(yīng)各種設(shè)備和環(huán)境。

這就是響應(yīng)式設(shè)計(jì)的魅力所在，它為我們提供了一個(gè)全新的視角，讓我們能夠創(chuàng)造出更加流暢、統(tǒng)一且個(gè)性化的用戶體驗(yàn)。

一、常見的布局方式

常見的布局適配方式有：靜態(tài)布局、流式布局、自適應(yīng)布局、彈性布局、響應(yīng)式布局，每種布局方式都有其獨(dú)特的優(yōu)勢(shì)和適用場(chǎng)景，本次重點(diǎn)介紹：響應(yīng)式布局。

1. 靜態(tài)布局

即傳統(tǒng)Web設(shè)計(jì)，網(wǎng)頁上的所有元素的尺寸一律使用px作為單位。

布局特點(diǎn)：

固定內(nèi)容寬度，不管屏幕尺寸具體是多少，布局及內(nèi)容始終不變；如果小于這個(gè)寬度就會(huì)出現(xiàn)滾動(dòng)條，如果大于這個(gè)寬度則內(nèi)容居中外加背景。

2. 流式布局

流式布局（Liquid）的特點(diǎn)（也叫”Fluid”）是頁面元素的寬度按照屏幕分辨率進(jìn)行適配調(diào)整，但整體布局不變。代表作柵欄系統(tǒng)（網(wǎng)格系統(tǒng)）。

布局特點(diǎn)：

屏幕分辨率變化時(shí)，頁面里元素的大小會(huì)變化而但布局不變；如果屏幕太大或者太小都會(huì)導(dǎo)致元素?zé)o法正常顯示。

3. 自適應(yīng)布局

自適應(yīng)布局的特點(diǎn)是分別為不同的屏幕分辨率定義布局，即創(chuàng)建多個(gè)靜態(tài)布局，每個(gè)靜態(tài)布局對(duì)應(yīng)一個(gè)屏幕分辨率范圍。改變屏幕分辨率可以切換不同的靜態(tài)局部（頁面元素位置發(fā)生改變），但在每個(gè)靜態(tài)布局中，頁面元素不隨窗口大小的調(diào)整發(fā)生變化。可以把自適應(yīng)布局看作是靜態(tài)布局的一個(gè)系列。

布局特點(diǎn)：

多個(gè)尺寸的布局方案，每種布局對(duì)應(yīng)一個(gè)一個(gè)屏幕分辨率范圍；屏幕分辨率變化時(shí)，頁面里面元素的位置會(huì)變化而大小不會(huì)變化。

4. 彈性布局

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

布局特點(diǎn)：

包裹文字的各元素的尺寸采用em/rem做單位，而頁面的主要?jiǎng)澐謪^(qū)域的尺寸仍使用百分?jǐn)?shù)或px做單位；會(huì)讓文字隨著變屏幕進(jìn)行變動(dòng)位置。

5. 響應(yīng)式布局

響應(yīng)式設(shè)計(jì)的目標(biāo)是確保一個(gè)頁面在所有終端上(各種尺寸的PC、手機(jī)、手表、冰箱的Web瀏覽器等)都能顯示出令人滿意的效果，通常是糅合了流式布局+彈性布局，——分別為不同的屏幕分辨率定義布局。

同時(shí)，在每個(gè)布局中，應(yīng)用流式布局的理念，即頁面元素寬度隨著窗口調(diào)整而自動(dòng)適配。即：創(chuàng)建多個(gè)流體式布局，分別對(duì)應(yīng)一個(gè)屏幕分辨率范圍。

布局特點(diǎn)：

??每個(gè)屏幕分辨率下面會(huì)有一個(gè)布局樣式，即元素位置和大小都會(huì)變；能夠適應(yīng)pc、移動(dòng)端等多端，如果足夠耐心，效果完美。

響應(yīng)式幾乎已經(jīng)成為優(yōu)秀頁面布局的標(biāo)準(zhǔn)，可以把響應(yīng)式布局看作是流式布局和自適應(yīng)布局設(shè)計(jì)理念的融合。

二、響應(yīng)式的設(shè)計(jì)構(gòu)成

1. 斷點(diǎn)系統(tǒng)

斷點(diǎn)是響應(yīng)式設(shè)計(jì)的基石。它們?cè)试S設(shè)計(jì)師調(diào)整布局，以適應(yīng)各種屏幕尺寸和設(shè)備的需求。

斷點(diǎn)定義了屏幕尺寸，設(shè)計(jì)圖應(yīng)調(diào)整到不同的布局。從技術(shù)上講，斷點(diǎn)是特定的屏幕尺寸。當(dāng)窗口大小達(dá)到該特定值時(shí)（例如，當(dāng)用戶調(diào)整了瀏覽器窗口大小時(shí)），布局將發(fā)生變化。

然而，在實(shí)踐中，設(shè)計(jì)師傾向于使用“斷點(diǎn)”一詞來指顯示特定布局的屏幕尺寸范圍（最小和最大寬度），因?yàn)檫@是他們必須在媒體查詢中指定的。例如，桌面斷點(diǎn)可能從1200px到1400px不等—這意味著桌面布局將顯示在該寬度范圍內(nèi)的任何屏幕上。

隨著網(wǎng)站尺寸大小的調(diào)整，它經(jīng)歷了2個(gè)不同的斷點(diǎn)。因此，布局從4列改為2列布局。

斷點(diǎn)越多，設(shè)計(jì)效果就越能正確、優(yōu)雅地適應(yīng)不同顆粒狀的屏幕尺寸變化。然而，在設(shè)計(jì)資源有限的實(shí)際情況下，擁有許多與過多屏幕尺寸相對(duì)應(yīng)的布局可能不起作用。在實(shí)踐中，設(shè)計(jì)師通常只能容納2-3個(gè)斷點(diǎn)。

2. 四個(gè)常見的斷點(diǎn)

通常，設(shè)計(jì)師會(huì)考慮設(shè)計(jì)4個(gè)基本斷點(diǎn)。我們使用4個(gè)尺碼（超小、小號(hào)、中號(hào)、大號(hào)），因?yàn)槊總€(gè)尺寸都沒有具體的標(biāo)準(zhǔn)。如前所述，每個(gè)斷點(diǎn)通常包含最小和最大寬度，可自定義以適應(yīng)設(shè)計(jì)的布局需求。

確定這些斷點(diǎn)確切值的起點(diǎn)是分析受眾在訪問網(wǎng)站時(shí)使用的設(shè)備范圍，然后建立斷點(diǎn)，以便您最佳地適應(yīng)更常見的顯示尺寸。

超?。捍朔秶m用于移動(dòng)設(shè)備，通常高達(dá)500px（如果您在橫向時(shí)包括設(shè)備）。4列網(wǎng)格通常用于此斷點(diǎn)大小。

?。捍朔秶m用于平板電腦設(shè)備，范圍從500像素到1200像素。8列網(wǎng)格通常用于這種平板電腦尺寸。

中等：此范圍適用于筆記本電腦設(shè)備，通常范圍從1200像素到1400像素。12列網(wǎng)格通常用于這種尺寸。

大：此范圍考慮了大型外部顯示器尺寸，為1400px及以上。12列的網(wǎng)格通常以這種大小繼續(xù)。

3. 柵格系統(tǒng)

柵格是以規(guī)則的網(wǎng)格陣列來指導(dǎo)和規(guī)范網(wǎng)頁中的版面布局以及信息分布，提高界面內(nèi)布局的一致性，節(jié)約成本。

柵格由列（column）、水槽 （gutter）、安全邊距（margin）組成。

列：用于對(duì)齊內(nèi)容。通常使用百分比（%）或固定值定義列的寬度。列的寬度不是一個(gè)固定值時(shí)，如果柵格的寬度發(fā)生變化，則列的寬度也會(huì)相應(yīng)地增大或縮小。

槽：是列之間的間隔。槽用來分隔內(nèi)容。通常槽的寬度為固定值。

邊距：是內(nèi)容和屏幕邊緣之間的間隔。通常為固定寬度，用來定義在所有尺寸屏幕下最小的呼吸空間?？筛鶕?jù)實(shí)際情況確定取值，建議使用8的倍數(shù)。

4. 布局

布局是指構(gòu)成頁面的不同內(nèi)容和UI元素如何定位在屏幕上。布局允許設(shè)計(jì)師利用屏幕或設(shè)備上的可用空間，使設(shè)計(jì)和內(nèi)容對(duì)用戶最有意義。

8、12、16 和 24是響應(yīng)式布局中最常見的列結(jié)構(gòu)。在柵格中放置內(nèi)容區(qū)塊時(shí)，內(nèi)容區(qū)塊的位置應(yīng)該從列開始，到列結(jié)束。

為了平衡靈活性與復(fù)雜度，以及適用多場(chǎng)景多尺寸，建議采用24 柵格系統(tǒng)。

三、響應(yīng)式設(shè)計(jì)示例

在斷點(diǎn)尺寸大小之間移動(dòng)時(shí)，通常會(huì)發(fā)生以下布局更改：

不同的導(dǎo)航：例如，當(dāng)從中斷點(diǎn)過渡到小型或超小型斷點(diǎn)時(shí)，左側(cè)導(dǎo)航可能會(huì)在漢堡包圖標(biāo)下折疊。

折疊列：右列如果存在，可能會(huì)折疊到主要內(nèi)容區(qū)域或在其他地方可用。

不同數(shù)量的可見內(nèi)容：布局列可能會(huì)增加或減少，導(dǎo)致給定行中的更多或更少的元素（卡片、文件、產(chǎn)品等）。

1. 網(wǎng)絡(luò)到移動(dòng)

文心一言在中等屏幕尺寸下，劃分3列構(gòu)成網(wǎng)格結(jié)構(gòu)，采用側(cè)邊欄+對(duì)話列表+對(duì)話內(nèi)容區(qū)的布局方式。在移動(dòng)（小屏幕尺寸）上，3列網(wǎng)格回流到單列網(wǎng)格結(jié)構(gòu)中，將導(dǎo)航及對(duì)話列表折疊收入頂部。

在小屏幕尺寸的斷點(diǎn)，文心一言的三列網(wǎng)格被重新流入一列網(wǎng)格結(jié)構(gòu)。

2. 臺(tái)式機(jī)到筆記本電腦

在Carbon Design System的網(wǎng)站上，左側(cè)導(dǎo)航在與大屏幕尺寸對(duì)應(yīng)的布局中默認(rèn)可見，但在中等屏幕尺寸時(shí)，它折疊在頂部欄的漢堡包圖標(biāo)下。

在大屏幕尺寸下，IBM的左側(cè)導(dǎo)航默認(rèn)可見（頂部）。在中等尺寸下，左側(cè)導(dǎo)航折疊在漢堡包菜單（底部）下。

3. 桌面到平板電腦

騰訊云在大屏幕尺寸下，首屏屏幕上會(huì)顯示功能模塊和用戶信息模塊。在小尺寸（對(duì)應(yīng)于平板電腦設(shè)備）時(shí)，默認(rèn)顯示優(yōu)先功能，用戶信息模塊在下面。

在大屏幕尺寸下，騰訊云采用兩欄布局，用戶信息顯示在右側(cè)（頂部）。在中等尺寸下，變成單欄布局，用戶信息顯示在功能模塊下方（底部）。

四、最后

隨著智能手機(jī)屏幕尺寸的增大，需要調(diào)整移動(dòng)斷點(diǎn)以適應(yīng)更大的顯示尺寸。開發(fā)團(tuán)隊(duì)?wèi)?yīng)參與定義網(wǎng)站的斷點(diǎn)，并在定義后考慮設(shè)計(jì)在不同尺寸下的流動(dòng)和重新排列。同時(shí)，需要關(guān)注用戶在特定尺寸上需要知道的信息，以及這些關(guān)鍵信息在布局中的可獲取性。