頁面布局不僅僅是前端同學(xué)要考慮的問題，也是設(shè)計(jì)同學(xué)要重點(diǎn)關(guān)注的；怎樣的布局能更好的展示頁面內(nèi)容同時(shí)兼容不同屏幕的大小呢？不同的布局形式下，設(shè)計(jì)師要著重考慮哪些點(diǎn)呢？今天就來探討下這個(gè)問題。

一、固定布局(靜態(tài)布局)

固定布局（Fixed Layout）：網(wǎng)頁上所有的元素寬度以像素（px）為單位。例如，直接設(shè)定網(wǎng)頁的主體部分寬度為960px/1200px，某個(gè)搜索框?qū)挾葹?0px等等。這種布局具有很強(qiáng)的穩(wěn)定性與可控性，缺點(diǎn)也顯而易見，即不能根據(jù)用戶的屏幕尺寸做出不同的表現(xiàn)。當(dāng)前，大部分門戶網(wǎng)站、新聞資訊類網(wǎng)站、企業(yè)的PC宣傳站點(diǎn)都采用了這種布局方式。

1.設(shè)計(jì)方法：

PC：大多采用居中布局，所有樣式使用絕對(duì)寬度/高度(px)，設(shè)計(jì)一稿合適的尺寸就可以，在屏幕寬高縮小時(shí)，使用橫向和豎向的滾動(dòng)條來查閱被遮掩部分；如果大于這個(gè)寬度則內(nèi)容居中，填加背景寬度。頁面的模塊、彈窗、間距等都是固定尺寸，需要設(shè)計(jì)補(bǔ)充的頁面規(guī)約比較少。

2.優(yōu)劣勢(shì)：

優(yōu)勢(shì)：這種布局方式對(duì)設(shè)計(jì)師來說是最簡單的，跟動(dòng)態(tài)布局相比，能夠更好地控制頁面的美觀度，排版穩(wěn)定，在窗口拉伸過程中規(guī)避了內(nèi)容重疊或者不規(guī)則的情況，仍保持原始比例，靜態(tài)位置和內(nèi)容樣式。

劣勢(shì)：顯而易見，即不能根據(jù)用戶的屏幕尺寸做出不同的表現(xiàn)，對(duì)于超大屏和超小屏用戶不友好。

3.舉例：

知乎網(wǎng)頁端：

微博網(wǎng)頁端：

2.流式布局（百分比布局）

流式布局（Liquid）的特點(diǎn)是頁面元素的寬度按照屏幕分辨率進(jìn)行適配調(diào)整，但整體布局不變。

流式布局也叫也叫百分比布局，是移動(dòng)端開發(fā)中經(jīng)常使用的布局方式之一。元素的寬度按照屏幕分辨率自動(dòng)進(jìn)行適配調(diào)整，保證當(dāng)前屏幕分辨率發(fā)生改變的時(shí)候，頁面中的元素大小也可以跟著改變。

流布局與固定寬度布局基本不同點(diǎn) 就在于對(duì)網(wǎng)站尺寸的側(cè)量單位不同。固定寬度布局使用的是像素，但是流布局使用的是百分比，這位網(wǎng)頁提供了很強(qiáng)的可塑性和流動(dòng)性。把元素的寬,高,邊距,間距不再用固定數(shù)值,改用百分比,這樣元素的高,間距會(huì)根據(jù)頁面的尺寸隨時(shí)調(diào)整，以達(dá)到適應(yīng)當(dāng)前頁面的目的。屏幕分辨率變化時(shí)，頁面里元素的大小會(huì)變化而但布局不變。

* 百分比是基于元素父級(jí)的大小計(jì)算得來的；* 元素的水平或者豎直間距都是相對(duì)于父級(jí)的寬度計(jì)算的.* 邊框不能用百分比設(shè)置

1.設(shè)計(jì)方法：

網(wǎng)頁中主要的劃分區(qū)域的尺寸使用百分?jǐn)?shù)（搭配寬度最大值、最小值屬性使用），例如，設(shè)置網(wǎng)頁主體的寬度為80%，最小寬為960px，（最小寬也就是保證頁面內(nèi)容不會(huì)錯(cuò)亂的情況下的寬度，到達(dá)最小寬度后，不再適應(yīng)，出滾動(dòng)條）圖片也作類似處理（寬度:100%, 最大寬一般設(shè)定為圖片本身的尺寸，防止被拉伸而失真）。

注意：

寬度自適應(yīng)，但是里面的圖標(biāo)、字體等也是固定大小的，并不是所有的東西都是自適應(yīng)的。一些大的圖片，設(shè)置寬度為百分比自適應(yīng)即可，隨著屏幕大小進(jìn)行變化,對(duì)于小圖標(biāo)或者文本等, 一般都是固定寬高大小。

同時(shí)考慮到頁面具體模塊、彈窗、字段等在最小寬度下的顯示，比如給出字段最小寬度，在最小寬度顯示不下時(shí)如何處理。可以參考阿Zi之前的文章：https://www.zcool.com.cn/article/ZMTE5NDAzNg==.html

在網(wǎng)頁布局中，我們通過設(shè)置元素的寬高定義元素的顯示大小，但是，在不同窗口大小，不同分辨率下，寬高相同的元素顯示狀況是不同的。所以，我們往往需要元素的大小能夠根據(jù)窗口或子元素自動(dòng)調(diào)整以達(dá)到自適應(yīng)。沒錯(cuò)，在頁面設(shè)計(jì)中，自適應(yīng)的規(guī)則往往是需要設(shè)計(jì)補(bǔ)充的最多的。

因?yàn)榘i所在公司的管理系統(tǒng)是采用左側(cè)導(dǎo)航欄固定，右側(cè)內(nèi)容區(qū)自適應(yīng)的流式布局，所以舉幾個(gè)實(shí)際工作中的應(yīng)用的規(guī)約例子：

a.彈窗自適應(yīng)

b.模塊、卡片自適應(yīng)

一種是當(dāng)頁面橫向拉伸時(shí)，卡片里內(nèi)容個(gè)數(shù)不變，布局不變?？梢园褜挾染殖蓭讐K，然后內(nèi)容在模塊內(nèi)居中，給出最小寬度；如下，設(shè)定單個(gè)最小寬100px，如到達(dá)最小寬度后顯示不全，出現(xiàn)橫向滾動(dòng)條；更靈活的情況就是收縮時(shí)內(nèi)容/區(qū)塊布局變動(dòng)的。同樣要設(shè)置區(qū)塊最小寬；向右自適應(yīng)—橫向排序，右側(cè)不夠則折行；最小寬度平均分成均等份，剩余寬度均分到其他列。

據(jù)統(tǒng)計(jì)，PC端用戶的主流分辨率主要為 1920、1440 和 1366，個(gè)別系統(tǒng)還存在 1280 的顯示設(shè)備。有些情況下不太好控制內(nèi)容自適應(yīng)，那么就需要出2，3套尺寸的設(shè)計(jì)稿來適配。可以根據(jù)具體情況判斷系統(tǒng)是否需要進(jìn)行適配，以及哪些區(qū)塊需要考慮動(dòng)態(tài)布局，哪些時(shí)候出多套尺寸。

2.優(yōu)劣勢(shì)：

優(yōu)勢(shì)：流式布局一般用于解決類似的設(shè)備不同分辨率之間的兼容(一般分辨率差異較少)

劣勢(shì)：因?yàn)閷挾仁褂?百分比定義，但是高度和文字大小等大都是用px來固定，所以在大屏幕的手機(jī)下顯示效果會(huì)變成有些頁面元素寬度被拉的很長，顯示不協(xié)調(diào)。

3.經(jīng)典的流式布局結(jié)構(gòu):

兩欄

常見的做法是將左邊的導(dǎo)航欄固定，對(duì)右邊的工作區(qū)域進(jìn)行動(dòng)態(tài)縮放。

兩欄的左側(cè)固定寬欄框大多在40到300范圍（適用于左側(cè)導(dǎo)航、篩選的情況）。

舉例：

Ant Design

三欄

在特殊場(chǎng)景下，左側(cè)會(huì)有雙重左欄的情況，適用與一級(jí)導(dǎo)航簡單，二級(jí)導(dǎo)航復(fù)雜的頁面。

舉例：Teambition

還有兩側(cè)固定，中間自適應(yīng)的布局，有圣杯布局和雙飛翼布局。圣杯布局來源于文章In Search of the Holy Grail，而雙飛翼布局來源于淘寶UED。雖然兩者的實(shí)現(xiàn)方法略有差異，但是視覺上都差不多，就是三欄，然后左右兩邊寬度固定，中間寬度自適應(yīng)。

還有瀑布流布局也是流式布局的一種。是當(dāng)下比較流行的一種網(wǎng)站頁面布局，視覺表現(xiàn)為參差不齊的多欄布局，隨著頁面滾動(dòng)條向下滾動(dòng)，這種布局還會(huì)不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部。最早采用此布局的網(wǎng)站是Pinterest，逐漸在國內(nèi)流行開來。

優(yōu)點(diǎn) 

1.有效的降低了界面復(fù)雜度，節(jié)省了空間；

2.對(duì)觸屏設(shè)備來說，交互方式更符合直覺：在移動(dòng)應(yīng)用的交互環(huán)境當(dāng)中，通過向上滑動(dòng)進(jìn)行滾屏的操作已經(jīng)成為最基本的用戶習(xí)慣，而且所需要的操作精準(zhǔn)程度遠(yuǎn)遠(yuǎn)低于點(diǎn)擊鏈接或按鈕。

3.更高的參與度：以上兩點(diǎn)所帶來的交互便捷性可以使用戶將注意力更多的集中在內(nèi)容而不是操作上，從而讓他們更樂于沉浸在探索與瀏覽當(dāng)中。

缺點(diǎn) 

1.有限的應(yīng)用場(chǎng)景：無限滾動(dòng)的方式只適用于某些特定類型產(chǎn)品當(dāng)中一部分特定類型的內(nèi)容。 

例如，在電商網(wǎng)站當(dāng)中，用戶時(shí)常需要在商品列表與詳情頁面之間切換，這種情況下，傳統(tǒng)的、帶有頁碼導(dǎo)航的方式可以幫助用戶更穩(wěn)妥和準(zhǔn)確的回到某個(gè)特定的列表頁面當(dāng)中。 

2.關(guān)于頁面數(shù)量的印象：其實(shí)站在用戶的角度來看，這一點(diǎn)并非負(fù)面;不過，如果對(duì)于你的網(wǎng)站來說，通過更多的內(nèi)容頁面展示更多的相關(guān)信息(包括廣告)是很重要的策略，那么單頁無限滾動(dòng)的方式對(duì)你并不適用。

3.關(guān)于精準(zhǔn)定位：無限滾動(dòng)加載讓用戶很難精準(zhǔn)定位到某一模塊。

舉例：pinterest

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

響應(yīng)式布局是Ethan Marcotte在2010年5月份提出的一個(gè)概念，簡而言之，就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本。響應(yīng)式布局能使網(wǎng)站在手機(jī)和平板電腦上有更好的瀏覽體驗(yàn)，也就就是說一個(gè)網(wǎng)站能后兼容多個(gè)終端，而不是為了每一個(gè)終端做一個(gè)特定的版本。

響應(yīng)式布局意味著，無論用戶是在iPhone還是筆記本電腦上查看網(wǎng)站，都應(yīng)該能夠訪問所需的內(nèi)容，擁有一致的用戶體驗(yàn)，這就要求UX/UI設(shè)計(jì)人員考慮的問題更多，同時(shí)考慮到網(wǎng)站和移動(dòng)設(shè)備的場(chǎng)景，忽略這些肯定會(huì)阻礙網(wǎng)站或移動(dòng)應(yīng)用程序的用戶體驗(yàn)。

接下來從響應(yīng)式設(shè)計(jì)的特點(diǎn)著手，展開下設(shè)計(jì)師需要了解和注意的點(diǎn)。

1.響應(yīng)式設(shè)計(jì)的特點(diǎn)

CSS斷點(diǎn)

CSS斷點(diǎn)是響應(yīng)式網(wǎng)站的經(jīng)典特征。他們的工作是根據(jù)屏幕大小將設(shè)計(jì)“分解”為較小的網(wǎng)站版本。斷點(diǎn)通常具有最小和最大寬度，這些寬度決定了用戶可以看到哪個(gè)版本的設(shè)計(jì)。

但是，一個(gè)網(wǎng)站需要多少個(gè)斷點(diǎn)才能真正響應(yīng)？如果設(shè)備不適合最小或最大寬度，則網(wǎng)站設(shè)計(jì)仍然看起來很奇怪，這違背了創(chuàng)建響應(yīng)式設(shè)計(jì)的全部目的。

尼克·巴比奇（Nick Babich）指出，大多數(shù)響應(yīng)式網(wǎng)站都需要至少三個(gè)或四個(gè)斷點(diǎn)才能正常工作。根據(jù)縮放的大小，內(nèi)容將相應(yīng)地進(jìn)行調(diào)整。斷點(diǎn)通常針對(duì)移動(dòng)設(shè)備，平板電腦和臺(tái)式機(jī)視圖進(jìn)行細(xì)分，盡管您可以擁有更多的斷點(diǎn)，以便涵蓋所有基礎(chǔ)，以提高設(shè)備的靈活性。許多設(shè)計(jì)師還包括“較小”的斷點(diǎn)，這些內(nèi)容在內(nèi)容中會(huì)自行調(diào)整以保持設(shè)計(jì)的視覺平衡，但不會(huì)發(fā)生大的變化。這包括更改字體大小之類的內(nèi)容，但不包括一般結(jié)構(gòu)。

最佳的視覺效果

圖像在任何網(wǎng)站中都非常重要，無論是高分辨率照片還是自定義插圖。那里的一些設(shè)計(jì)師相信裁剪圖像，以便用戶只能在較小的屏幕上看到圖像的一部分，因此視覺效果保持不變。對(duì)于我們而言，最好的方法是使用矢量圖像。

移動(dòng)設(shè)備優(yōu)先

對(duì)于許多設(shè)計(jì)團(tuán)隊(duì)而言，最好首先關(guān)注最小的屏幕來開始設(shè)計(jì)。這主要是因?yàn)橥ㄟ^將移動(dòng)設(shè)計(jì)放在首位，團(tuán)隊(duì)可以對(duì)內(nèi)容的去向有一個(gè)很好的了解。

響應(yīng)式設(shè)計(jì)圍繞內(nèi)容，假設(shè)你采用建議的“移動(dòng)設(shè)備優(yōu)先”方法，則意味著您應(yīng)該為移動(dòng)設(shè)備分配重要內(nèi)容的優(yōu)先級(jí)，并隨著屏幕尺寸的增加添加更多內(nèi)容。

當(dāng)涉及到響應(yīng)式設(shè)計(jì)時(shí)，與常規(guī)設(shè)計(jì)相對(duì)應(yīng)的只是關(guān)注內(nèi)容。因此，通過首先創(chuàng)建移動(dòng)版本，我們可以縮小從一開始就需要顯示的關(guān)鍵內(nèi)容（用戶絕對(duì)需要的部分）的范圍。從那里，我們可以在進(jìn)入更大的屏幕時(shí)添加更多的細(xì)節(jié)和更多的內(nèi)容，或者找到更好的方式來顯示關(guān)鍵內(nèi)容。

2.響應(yīng)式設(shè)計(jì)的注意事項(xiàng)：

1）注意視覺層次，從最小寬度的斷點(diǎn)開始

這建議從最小的屏幕分辨率開始的原因有關(guān)。這不僅是要了解內(nèi)容的哪些部分絕對(duì)重要，還在于了解呈現(xiàn)這些內(nèi)容的最佳方法。

當(dāng)網(wǎng)站在不同的斷點(diǎn)切換時(shí)，網(wǎng)站的視覺層次結(jié)構(gòu)可能必須適應(yīng)，從某種意義上說，它需要適應(yīng)屏幕尺寸的變化，為了保持產(chǎn)品的可用性，組件也必須適應(yīng)。

如上所述，在響應(yīng)式網(wǎng)頁設(shè)計(jì)中使用的每個(gè)斷點(diǎn)都將有一個(gè)最小寬度和一個(gè)最大寬度。當(dāng)使用移動(dòng)優(yōu)先的方法設(shè)計(jì)，一個(gè)好的經(jīng)驗(yàn)法則就是可以從你的三個(gè)斷點(diǎn)的每個(gè)最小寬度開始設(shè)計(jì)。這樣，您將為較小的設(shè)備設(shè)計(jì)屏幕，并在屏幕變大時(shí)添加更多內(nèi)容和UI元素。請(qǐng)記?。合蛏贤卣苟皇窍蛳驴s放，向上拓展總是容易的。

2）按鍵尺寸至關(guān)重要

對(duì)于基于Web的產(chǎn)品，按鈕可能非常簡單。畢竟，光標(biāo)是幾乎任何人都可以使用的準(zhǔn)確工具，但我們的手指說的不一樣。所討論的手指的大小可能因用戶而異，并且設(shè)計(jì)人員需要考慮移動(dòng)屏幕上的可用空間很小。

根據(jù)Apple的《人機(jī)界面指南》，平均手指輕觸為44×44像素。為了提高可用性，請(qǐng)確保針對(duì)此平均值對(duì)按鈕和可點(diǎn)擊區(qū)域進(jìn)行適當(dāng)調(diào)整。

3）優(yōu)先瀏覽

如果您依賴導(dǎo)航欄作為查找信息的主要方式，則需要在移動(dòng)設(shè)計(jì)中仔細(xì)確定導(dǎo)航欄的優(yōu)先級(jí)。該產(chǎn)品的各個(gè)方面（例如導(dǎo)航設(shè)計(jì)）絕對(duì)至關(guān)重要，需要在響應(yīng)迅速的網(wǎng)站中進(jìn)行仔細(xì)計(jì)劃。隨著設(shè)備屏幕的變小，該導(dǎo)航欄的空間將越來越小。

那么像這些問題就需要我們重點(diǎn)考慮：什么時(shí)候隱藏導(dǎo)航選項(xiàng)？全部隱藏嗎？首先隱藏哪些？

常用的做法是，將導(dǎo)航、頭部搜索、用戶信息等內(nèi)容隱藏在按鈕后面，例如我們?cè)谑謾C(jī)上經(jīng)常能看到的漢堡菜單。的確，漢堡菜單并不是唯一的選擇，但不可否認(rèn)的是，整個(gè)導(dǎo)航菜單都需要隱藏在智能手機(jī)中。

這就是要嘗試確定整個(gè)產(chǎn)品中最重要的頁面，并確保無論使用哪種設(shè)備，用戶都可以找到它們。在設(shè)計(jì)過程中盡早完成此優(yōu)先級(jí)設(shè)置總是最好的，因此，如果我們從移動(dòng)設(shè)計(jì)入手，我們將已經(jīng)需要包含一些重要的內(nèi)容。

3.優(yōu)劣勢(shì)

優(yōu)勢(shì)：

a.用戶體驗(yàn)友好

隨著電腦尺寸多元化，智能設(shè)備（pad/智能手機(jī)）普及化，在當(dāng)下追求用戶體驗(yàn)至上的時(shí)代，網(wǎng)站普遍使用固定的寬度逐漸滿足不了現(xiàn)在不同設(shè)備與不同分辨率需求。在高分辨率電腦寬屏顯示器上，兩邊留白過多。在手機(jī)上顯示，內(nèi)容顯示過小，用戶為了看清楚，首先需要放大界面，再左右拖拖界面。響應(yīng)式網(wǎng)站可以根據(jù)不同終端、不同尺寸和不同應(yīng)用環(huán)境，自動(dòng)調(diào)整界面布局、展示內(nèi)容、內(nèi)容大小，提供非常好視覺展示效果，一致性友好體驗(yàn)。

b.提高轉(zhuǎn)換率和銷量

響應(yīng)式網(wǎng)站意味著您無需在網(wǎng)站設(shè)置跳轉(zhuǎn)，從而極大完善了用戶體驗(yàn)，這也是響應(yīng)式網(wǎng)站的最大優(yōu)勢(shì)所在。另外，使用集成式設(shè)計(jì)和CSS表單一類的功能使網(wǎng)站無論在何種設(shè)備上都能營造出風(fēng)格一致的感覺和外觀。若熟悉這種布局，用戶可以在任何設(shè)備上輕松瀏覽您的網(wǎng)站，進(jìn)而提高轉(zhuǎn)換率。

c.節(jié)省開發(fā)投入

摒棄傳統(tǒng)網(wǎng)站，選擇響應(yīng)式網(wǎng)頁，單從開發(fā)階段就節(jié)省大量時(shí)間和金錢。為不同的設(shè)備同時(shí)開發(fā)多個(gè)網(wǎng)站，意味著后期也需要更多的開發(fā)支持費(fèi)用和維護(hù)成本。

d.三站合一，維護(hù)簡單

電腦、手機(jī)、微信三個(gè)網(wǎng)站使用的是同一個(gè)網(wǎng)址，同一個(gè)后臺(tái)管理，數(shù)據(jù)同步更新，所有圖片和內(nèi)容只需要上傳更新一次即可，維護(hù)簡單輕松。

劣勢(shì)：

a.設(shè)計(jì)與風(fēng)格有局限性

雖然響應(yīng)式布局擁有如此顯著的優(yōu)點(diǎn)，但它也并不是十全十美的，在很多方面，它也有它自身的局限性：

自由度太低，局限性較大，這種情況就是必須兼顧移動(dòng)端以及PC端的表現(xiàn)，比如最常見的移動(dòng)端并沒有懸停效果，PC端就要酌情考慮了。需要考慮在手機(jī)，pad，PC上三種屏幕下的頁面內(nèi)元素的呈現(xiàn)，會(huì)導(dǎo)致有著非常大的局限。

b.對(duì)IE老板兼容性不友好

對(duì)于老版本IE（IE6、IE7、IE8）支持不好，這是一個(gè)致命的問題，如果你的網(wǎng)站用戶大多還采用老版本IE的話，建議不做響應(yīng)式網(wǎng)頁設(shè)計(jì)。

c.靈活性有所欠缺

基于不同終端的設(shè)備屬性不同，對(duì)產(chǎn)品用戶體驗(yàn)要求就會(huì)截然不同。內(nèi)容比較多帶有功能性的網(wǎng)站不適合做響應(yīng)式網(wǎng)站設(shè)計(jì)，如：電商類型網(wǎng)站，寬屏的pc端內(nèi)容如果全部要在手機(jī)端進(jìn)行展示，勢(shì)必導(dǎo)致手機(jī)端的界面非常長，需要根據(jù)手機(jī)端屬性進(jìn)行重新信息框架設(shè)計(jì)，這樣對(duì)響應(yīng)網(wǎng)站要求非常高，實(shí)現(xiàn)難度與成本非常高。但是大型網(wǎng)站為了提高用戶體驗(yàn)，通常做法，把高分辨率寬屏網(wǎng)站最小的響應(yīng)尺寸響應(yīng)到1024px，不再適配手機(jī)端，手機(jī)端重新設(shè)計(jì)開發(fā)一套手機(jī)網(wǎng)站，簡單理解為2.5響應(yīng)，如：電商網(wǎng)站亞馬遜、Calvin Klein、Nike、視頻網(wǎng)站Youtube，等。

d.速度可能會(huì)變慢

由于響應(yīng)式頁面是同時(shí)下載多套CSS樣式代碼，可能在手機(jī)上就下載PC、Pad的冗余代碼，導(dǎo)致文件變大，影響加載速度。

根據(jù)響應(yīng)式網(wǎng)站的優(yōu)缺點(diǎn)，我們不難看出：企業(yè)官網(wǎng)、單頁宣傳網(wǎng)站非常適合做響應(yīng)式網(wǎng)站設(shè)計(jì)，由于它們的界面內(nèi)容比較少，結(jié)構(gòu)比較簡單，所以在不同終端、不同尺寸設(shè)備上進(jìn)行網(wǎng)站信息框架調(diào)整、內(nèi)容加減、圖片、文字、柵格響應(yīng)比較容易。內(nèi)容比較多帶有功能性的網(wǎng)站不適合做響應(yīng)式網(wǎng)站設(shè)計(jì)。

3.舉例

示例1----Dribbble

在1960-2048的屏幕下，顯示5列內(nèi)容

在950-1330-1960屏幕下顯示3到4列

在500-620-950尺寸下顯示1-2列布局，并且把頭部主導(dǎo)航、搜索框、用戶設(shè)置等內(nèi)容收起到到左上角菜單：

示例2----Event Apart

互動(dòng)設(shè)計(jì)會(huì)議Event Apart創(chuàng)造了從其主要網(wǎng)站到其移動(dòng)網(wǎng)站的無縫過渡。

他們選擇在大多數(shù)平臺(tái)上保持大多數(shù)相同的布局，平板電腦版本與臺(tái)式機(jī)相同，并且可以使用。這是因?yàn)樗麄優(yōu)榍逦鹨娺x擇在白色背景上以粗體顯示內(nèi)容，并且在調(diào)整大小時(shí)，可以輕松滾動(dòng)信息。

唯一真正的變化是，對(duì)于移動(dòng)版本，頂部的面包屑折疊成一個(gè)漢堡菜單，并用“菜單”一詞明確指示。

示例3----Popular Science

無論使用哪種設(shè)備，Popular Science都能為您帶來出色的用戶體驗(yàn)。

正如您所期望的那樣，內(nèi)容處于中心位置，并且具有響應(yīng)式圖像和簡潔的版式，Popular Science成功地創(chuàng)建了易于閱讀和使用的響應(yīng)式網(wǎng)站。本網(wǎng)站上的信息以一種可以在各種設(shè)備上輕松按比例縮小其所有內(nèi)容的方式顯示。

最后

雖然目前響應(yīng)式設(shè)計(jì)的模式的普及還是有很多難題需要突破：比如響應(yīng)式的圖片、跨端交互、更高的性能、全新的合作流程等等。但是隨著科技不斷發(fā)展，響應(yīng)技術(shù)逐漸完善，給響應(yīng)式設(shè)計(jì)提供強(qiáng)有力的技術(shù)支持；響應(yīng)式設(shè)計(jì)可以在不同終端提供完美展示效果與友好的用戶體驗(yàn)，吻合用戶體驗(yàn)至上的趨勢(shì)。所以說，響應(yīng)式設(shè)計(jì)必定是未來發(fā)展趨勢(shì)。

藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)