以Bootstrap爲例讓您更加深入了解什麼(me)是響應式網站設計

　　近年來，随著(zhe)科學(xué)技術的發(fā)展，終端的分辨率越來越多，響應式的設計氤氲而生。然而，作爲設計師，你是否遇到過(guò)這(zhè)樣的情況：當你設計響應式網站的時(shí)候，由于不了解其規範及實現原理，而根據自己的理解設計出了一套設計稿。然而，當這(zhè)份設計稿放到開(kāi)發(fā)面(miàn)前時(shí)，卻發(fā)現很多你考慮得很美好(hǎo)的設計方案難以被開(kāi)發(fā)，最終無法還(hái)原設計稿的效果。

　　今天圻谷網絡淄博響應式網站設計公司小編就(jiù)圍繞響應式的設計方法來寫，重點簡述流式網格、元素切換、響應式樣式。以Bootstrap爲例讓您更加深入了解什麼(me)是響應式網站設計

　　首先，我們先來了解幾個概念。這(zhè)幾個概念有涉及到設計，也有涉及到開(kāi)發(fā)。當然，我們的目的不是學(xué)習開(kāi)發(fā)技術，而是通過(guò)對(duì)這(zhè)些概念的了解，更好(hǎo)的掌握響應式設計的方法。

　　1.響應式布局

　　響應式布局是Ethan Marcotte在2010年提出的概念。他認爲，一個網站能(néng)夠兼容多個終端(指不同分辨率，不同Dpi的顯示設備)，而不是爲每一個終端做一個特定的版本，這(zhè)樣的網站布局方式即稱爲響應式布局。

　　由于科技的迅速發(fā)展，終端設備的分辨率越來越多樣化，響應式布局正是爲此而生，其目的是确保一個頁面(miàn)在所有終端上都(dōu)能(néng)呈現出令人滿意的效果。

　　響應式布局結合多種(zhǒng)布局方式，從而确保一個頁面(miàn)能(néng)夠适應不同終端的顯示。

　　常見的動态布局方式：

　　（1）自适應布局是指當視口分辨率改變時(shí)，頁面(miàn)的元素位置會(huì)自動調整以适應視口的布局方式。

　　（2）流式布局是指當視口分辨率改變時(shí)，頁面(miàn)元素的寬度根據百分比壓縮，而高度自動調整的布局方式。

　　（3）彈性布局是指當視口分辨率改變時(shí)，頁面(miàn)元素按比例縮放從而适應視口的布局方式。

　　（4）響應式布局綜合了多種(zhǒng)動态布局，使得頁面(miàn)在不同分辨率的視口可以呈現出不同的布局。

　　

　　2.媒體查詢

　　媒體查詢這(zhè)個詞，對(duì)于設計師來說(shuō)應該是非常陌生的。不過(guò)如果你是需要編寫web靜态頁面(miàn)的網頁設計師的話，應該對(duì)此有所了解。

　　媒體查詢是CSS3(Cascading Style Sheet：層疊樣式表)新增的特性。媒體查詢使得樣式表可以根據不同的媒體、不同的視口尺寸定義不同的樣式。這(zhè)種(zhǒng)新特性對(duì)于設計響應式頁面(miàn)是非常有意義的。

　　舉個例子，我們想要設計一個這(zhè)樣的卡片：當它在PC端時(shí)，顯示爲一張漂浮著(zhe)的卡片，而在移動端需要讓它顯示爲橫向(xiàng)鋪滿的通欄。

　　那麼(me)，媒體查詢實現方式及效果如下：

　　

　　如圖所示，開(kāi)發(fā)隻需要先編寫号移動端的樣式，然後(hòu)在樣式表中加入寬度大于768px的設備的樣式表，即可實現一套前端代碼顯示不同的樣式，而無需爲移動端專門編寫一個html元素或者重新制作一個前端頁面(miàn)。

　　看到這(zhè)裡(lǐ)，或許有人會(huì)疑惑，如果是768px以下的寬度才會(huì)顯示移動端的樣式，那麼(me)有的大屏手機寬度分辨率超多768px了，那不是和一般的樣式沖突了嗎？

　　其實，這(zhè)個問題作爲設計師并不需要考慮，CSS3裡(lǐ)面(miàn)已經(jīng)給我們解決了，前端工程師隻需要在head标簽中加入

　　<meta name="viewport" content="width=device-width, maximum-scale=1">

　　這(zhè)一句html代碼就(jiù)可以了。

　　這(zhè)句代碼其實就(jiù)是規定了設備屏幕的寬度按照dp(ios使用pt)來取值。

　　舉個例子，我們設計師經(jīng)常用來做移動端設計尺寸的iphone6的屏幕分辨率爲750x1334。邏輯分辨率Pt=375x667，也就(jiù)是說(shuō)iphone6的浏覽器會(huì)把屏幕當做375px的寬度來顯示。

　　3.Bootstrap

　　Bootstrap是目前世界上受衆最廣的web前端框架，集合了世界上許多前端工程師的心血和經(jīng)驗，非常适用于響應式和移動設備的開(kāi)發(fā)。學(xué)習Bootstrap，有助于深入了解響應式的實現原理和應用方式。

　　4.網格系統(Grid System)

　　這(zhè)裡(lǐ)說(shuō)的網格系統當然不是排版布局中用到的栅格網格，而是響應式布局中用來控制列寬和列數的流式網格系統，其特點是随著(zhe)視口尺寸的變化，網格的列寬和列數會(huì)有不同變化，以适應不同尺寸的視口。

　　本文以Bootstrap的網格系統爲例，講解響應式布局中網格設計的規範。

　　一、布局容器

　　布局容器可以理解爲主視圖區域，見下圖：

　　

　　傳統的靜态布局頁面(miàn)一般會(huì)采用1000px、1100px 或 1200px等寬度作爲容器寬度進(jìn)行設計。

　　在響應式布局中，一般有兩(liǎng)種(zhǒng)容器類型：響應式固定寬度容器和全屏寬度容器。

　　（1）響應式的固定寬度容器：

　　響應式布局中，由于需要兼容不同寬度的視口，容器顯然不能(néng)采用固定的尺寸作爲寬度。所以，響應式布局所采用的固定寬度容器會(huì)根據視口的尺寸而進(jìn)行調整，常用的規範如下：

　　

　　（2）全屏寬度容器：

　　顧名思義，全屏寬度容器就(jiù)是我們用來設計全屏網站所采用的容器尺寸，它在任何時(shí)候，容器寬度都(dōu)爲100%

　　

　　二、網格系統

　　1.從bootstrap的網格系統開(kāi)始

　　網格系統是響應式設計的核心，通過(guò)對(duì)界面(miàn)元素定義不同分辨率下的網格列數，可以實現元素的響應式。

　　網格常見的有12列、16列、24列，之所以采用這(zhè)樣的數字，是因爲，這(zhè)樣的網格可以很好(hǎo)的根據需要均分出1列、2列、3列、4列……等适用于多種(zhǒng)情況的網格。

　　12列可分成(chéng)：1列、2列、3列、4列、6列、12列。

　　16列可分成(chéng)：1列、2列、4列、8列、16列。

　　24列……

　　以bootstrap爲例，它使用的是12列網格系統，并且支持嵌套(嵌套後(hòu)面(miàn)再講)。

　　

　　我們通過(guò)例子來講使用網格設計響應式布局的方法。

　　假設我們要設計一個圖文列表頁，例如站酷首頁、Dribbble首頁這(zhè)樣的。同時(shí)，我們想要做到更好(hǎo)的自适應：1200px以上的視口，顯示六列。992px - 1200px的視口，顯示3列。

　　768px - 992px 的視口，顯示兩(liǎng)列。而小于768px的視口，則顯示1列(類似于站酷APP)。

　　利用，網格系統，我們可以這(zhè)樣設計：

　　

　　這(zhè)樣的響應式設計，對(duì)于掌握響應式框架、懂得網格系統的開(kāi)發(fā)人員來說(shuō)，隻需要非常少量的代碼就(jiù)可以搞定。

　　

　　當然，網格系統的應用場景不單單是等列寬列表，它幾乎可以用在一切布局上。

　　比如，不對(duì)等的布局：

　　

　　再比如隻占據一半内容的布局：

　　

　　1.網格嵌套

　　首先看下面(miàn)的例子：

　　

　　從上面(miàn)例子中應該容易理解嵌套。

　　網格嵌套就(jiù)是指一個網格系統中可以再嵌套一個網格系統，嵌套的網格系統還(hái)可以繼續嵌套。從而構建更加複雜的布局。

　　三、元素切換

　　在響應式布局中元素的切換是指，不同元素根據終端尺寸不同自動切換顯示、隐藏狀态的行爲。

　　元素的切換應用場景：

　　1.在大屏到小屏的變化過(guò)程中，隐藏部分信息。

　　2.對(duì)于某些需要在不同終端上需要呈現截然不同的視覺效果的設計，由于無法使用一個元素達到這(zhè)種(zhǒng)變化。所以需要分别制作兩(liǎng)個不同的元素，再根據需要進(jìn)行顯示隐藏。

　　

　　一般而言，某個元素塊隐藏之後(hòu)，該元素右側的元素會(huì)往左移填充。某行元素隐藏後(hòu)，該元素以下的元素會(huì)上移填充。設計時(shí)遵循此規律會(huì)有利于技術實現。

　　注意：元素切換功能(néng)需要謹慎使用，減少設計需要切換的布局，特别是避免對(duì)整一個網頁設計完全不同的版本。

　　四、響應式樣式

　　如前文所叙，元素的樣式可以在不同分辨率的視圖内進(jìn)行切換。這(zhè)并不是說(shuō)我們設計時(shí)可以任意設計。當我們在ps等設計軟件設計的樣式無法通過(guò)css樣式寫出，而必須使用圖片或其他複雜的組合來實現的時(shí)候，則難以做到樣式的響應式。

　　這(zhè)裡(lǐ)總結一些CSS常用的樣式，設計師隻需使用這(zhè)些樣式來組合設計，就(jiù)可以創造出前端容易實現的響應式樣式。

　　

　　

　　

　　

　　

　　更形象的演示效果請見附件中的Html文件。

　　(PS：如果想要更深入的了解樣式的響應式，還(hái)是需要自行了解一下CSS樣式表的寫法。)

　　五、如何優化

　　接下來，要講的是在響應式設計中，如何合理的對(duì)多個端口進(jìn)行布局的調整，以達到易于開(kāi)發(fā)的目的。

　　1.保持一緻的順序

　　響應式布局由于布局的“善變”，對(duì)于内容的設計也不會(huì)采用固定的大小和順序。一般來說(shuō)，内容是以流的形式進(jìn)行設計。對(duì)于内容流來說(shuō)，需要遵循從左到右→從上到下的變化。

　　

　　這(zhè)樣設計一是符合現代人的閱讀順序且有利于閱讀順序在不同終端上的一緻性；二是更利于快速開(kāi)發(fā)前端頁面(miàn)。

　　對(duì)于上圖中，錯誤示範的情況，并非決對(duì)不可行，而是一般不建議。這(zhè)種(zhǒng)反常規的順序，對(duì)于開(kāi)發(fā)來說(shuō)難度增大許多，而且會(huì)産生更多冗餘代碼。

　　例如之前做過(guò)的一個網站，就(jiù)是典型的例子：

　　

　　2.盡量不要使用5列

　　正如前面(miàn)介紹網格系統時(shí)說(shuō)到過(guò)，網格系統一般采用12列、16列、24列等可以均分爲多個數的2倍數列。當你想設計5均分列、7均分列、9均分列、11均分列等列數時(shí)會(huì)發(fā)現，這(zhè)些網格系統并不能(néng)滿足所需。一旦設計這(zhè)樣的列數，就(jiù)意味著(zhe)開(kāi)發(fā)人員需要自己寫這(zhè)個等分樣式或者修改框架的網格系統，降低其效率降低。

　　并且，這(zhè)些列數將(jiāng)比較難和現有的網格系統交互使用，使得響應式的設計收到影響，開(kāi)發(fā)也同時(shí)受到這(zhè)些影響。

　　3.減少模塊的增減

　　即便CSS3提供了媒體查詢和元素的顯示隐藏功能(néng)，但是我們依然還(hái)是盡量的減少通過(guò)隐藏模塊的方式來向(xiàng)下兼容低分辨率的顯示器。

　　因爲這(zhè)樣做雖然可以增加用戶體驗，但是對(duì)于流量和代碼複雜度都(dōu)沒(méi)有任何幫助。

　　特别對(duì)于受衆面(miàn)廣的門戶網站來說(shuō)，可以說(shuō)寸流量寸金，這(zhè)樣的響應式布局，即便你把移動端的頁面(miàn)設計得非常非常簡潔，那些隐藏起(qǐ)來的部分也僅僅隻是隐藏起(qǐ)來了，它依然會(huì)被下載到你的移動設備上。

　　現階段來說(shuō)，更好(hǎo)的解決方案，依然是給移動端單獨設計一套頁面(miàn)，單獨開(kāi)發(fā)一套代碼。這(zhè)樣做除了節省流量外，也能(néng)更好(hǎo)的針對(duì)移動端的操作習慣進(jìn)行設計，而不用爲了兼容更多的終端而犧牲了一些體驗。

　　4.樣式統一

　　同一個模塊在不同終端上盡量做到統一樣式。畢竟視覺效果更統一的話，品牌感會(huì)比較強。對(duì)于設計師的你來說(shuō)，視覺規範更容易寫，更容易維護。

　　而開(kāi)發(fā)人員也會(huì)感激你的，因爲他不用爲不同的樣式去編寫、去維護更多的樣式表。

　　而代碼越少，加載越快，用戶體驗也越好(hǎo)。

　　5.移動優先

　　有沒(méi)有發(fā)現，許多優秀的響應式網站，設計總是那麼(me)的簡潔大方，對(duì)手機等小屏設備的支持總是那麼(me)的完美，用戶體驗好(hǎo)到飛起(qǐ)。

　　因爲他們采用的是移動優先的設計原則。移動優先這(zhè)個詞是伴随著(zhe)響應式而出現的，主要是因爲移動端的布局和功能(néng)總是比更大的設備簡單。

　　而從簡單到複雜的過(guò)程總是比從複雜到簡單的過(guò)程容易。

　　而在大屏設備上觀看簡潔的内容也總是比在小屏設備上觀看複雜的内容來得舒服。

　　于是，當我們設計響應式網頁的時(shí)候，應該考慮從移動端開(kāi)始，先設計移動端的頁面(miàn)，然後(hòu)再設計更大的屏幕，往其中增加更複雜的布局和内容，最終實現從移動端到超大屏幕的漸進(jìn)增強。

　　六、什麼(me)時(shí)候選擇響應式設計

　　響應式設計的誕生是爲了解決不同分辨率的終端的适配問題，那麼(me)它是網頁設計的最佳方案嗎？它可以解決所有網頁設計的問題嗎？

　　答案是否定的。時(shí)至今日，響應式的研究已經(jīng)日趨成(chéng)熟，然而，它仍然隻能(néng)适用于一部分場景。如果你的項目符合以下幾點，那麼(me)響應式設計會(huì)是個不錯的選擇：

　　1.需要更強的兼容性

　　響應式誕生的目的就(jiù)是爲了解決不同終端的兼容問題，所以如果你的項目需要兼容多種(zhǒng)不同的設備，那麼(me)可以考慮響應式設計。

　　2.節約維護成(chéng)本

　　響應式布局雖然相較于靜态布局開(kāi)發(fā)難度大，但是維護成(chéng)本更低。

　　相對(duì)于多個終端多個版本的頁面(miàn)來說(shuō)，無論是修改代碼還(hái)是運維都(dōu)隻需要對(duì)一個内容進(jìn)行操作，而無需對(duì)每個端口單獨維護。

　　3.以展示爲主的站點

　　如果你的網站是功能(néng)型的，而且非常複雜的話，不要考慮響應式，因爲響應式的頁面(miàn)代碼冗餘很大，不利于複雜網站的開(kāi)發(fā)。

　　相反如果你的網站是以内容展示爲主的話，會(huì)比較适合使用響應式布局。

　　4.不考慮舊的浏覽器

　　由于響應式布局的很多實現手段是基于CSS3的，對(duì)于某些較老的浏覽器，會(huì)出現兼容問題。(“IE”我說(shuō)的就(jiù)是你，别東張西望！)

　　所以，如果需要考慮一些舊浏覽器的兼容問題的話，那還(hái)是乖乖的做靜态布局吧。