隨著Html5、CSS3等建站技術(shù)的發(fā)展，使用手機(jī)訪問網(wǎng)站的用戶也越來越多，響應(yīng)式網(wǎng)站設(shè)計(jì)在這樣的大環(huán)境下應(yīng)運(yùn)而生。但它一出生仿佛就自帶光環(huán)，以其同時(shí)適應(yīng)多種設(shè)備的屬性迅速"走紅"，受到不少公司和企業(yè)的青睞。前面小飛也在一些文章中討論過什么是響應(yīng)式設(shè)計(jì)，響應(yīng)式設(shè)計(jì)中的一些常見誤區(qū)和認(rèn)識(shí)盲點(diǎn)，響應(yīng)式設(shè)計(jì)的潮流趨勢等。但不少讀者反映雖然對(duì)響應(yīng)式網(wǎng)站設(shè)計(jì)有了一定的了解，但自己做網(wǎng)站時(shí)還是有些不知如何下手，所以小飛今天就帶大家一起看看響應(yīng)式網(wǎng)站究竟應(yīng)該怎么做。不用小飛多說，大家都知道響應(yīng)式設(shè)計(jì)最大的一個(gè)特點(diǎn)，就是靈活性，不管是網(wǎng)站布局、圖片視頻還是文本信息都可以輕松適應(yīng)不同大小的設(shè)備，下面幾點(diǎn)可都是圍繞這個(gè)特點(diǎn)展開的?？靵砜纯窗?

設(shè)置關(guān)鍵斷點(diǎn) 320 - 720 - 1024

首先將網(wǎng)站的整體布局設(shè)置成響應(yīng)式的。響應(yīng)式網(wǎng)站的布局一般是通過 @media query 的方式改變的，在哪種寬度下改變布局，這就是我們常說的斷點(diǎn)或響應(yīng)點(diǎn)。由于響應(yīng)式網(wǎng)站需要同時(shí)適應(yīng)PC、Pad、手機(jī)等，我們可以先設(shè)置3個(gè)關(guān)鍵斷點(diǎn)，分別針對(duì)不同類型的設(shè)備。不過前面我們在《真實(shí)的謊言--關(guān)于響應(yīng)式設(shè)計(jì)的六個(gè)認(rèn)識(shí)誤區(qū)》也聊過，響應(yīng)式網(wǎng)站是面向所有用戶的，而不是只針對(duì)某一個(gè)設(shè)備的用戶，不同設(shè)備的屏幕大小常有出入，在設(shè)置關(guān)鍵斷點(diǎn)時(shí)，我們還應(yīng)該結(jié)合站點(diǎn)的內(nèi)容，注重網(wǎng)站內(nèi)容信息的有效傳遞。一般來說，設(shè)置這3個(gè)斷點(diǎn)就足夠了。但小飛也見過設(shè)置了10個(gè)斷點(diǎn)的大神賣弄站。其實(shí)，高端響應(yīng)式網(wǎng)站中，斷點(diǎn)的設(shè)置沒有一定的規(guī)則，需要我們可以根據(jù)自身的需求(如希望網(wǎng)站兼顧哪些平臺(tái))以及用戶群體的情況(真實(shí)需求、規(guī)模、瀏覽器分辨率分布等)，因站制宜， 合理的進(jìn)行設(shè)規(guī)劃和實(shí)現(xiàn)。

建議： 根據(jù)各個(gè)不同的設(shè)備尺寸一個(gè)個(gè)的設(shè)置斷點(diǎn)，這項(xiàng)工程簡直太耗時(shí)了。小飛教你一招，其實(shí)我們查看大家平時(shí)常用的一些前端框架的源代碼，了解它們的斷點(diǎn)值并借鑒。但如果你在建站技術(shù)、寫代碼這方面完全是個(gè)小白，起飛頁自助建站平臺(tái)就是一個(gè)很好的選擇，無需任何專業(yè)技術(shù)輕松做網(wǎng)站，網(wǎng)站代建或是專業(yè)定制等服務(wù)應(yīng)有盡有。

優(yōu)先設(shè)計(jì)手機(jī)端

在構(gòu)建好網(wǎng)站的信息框架、準(zhǔn)備好各項(xiàng)元素和決定好設(shè)計(jì)風(fēng)格后，我們最好先根據(jù)手機(jī)端進(jìn)行設(shè)計(jì)，這是因?yàn)槭謾C(jī)等移動(dòng)端屏幕更小，更能有效篩選出網(wǎng)站最重要的元素。一旦移動(dòng)端的問題解決了，其他設(shè)備上的設(shè)計(jì)問題也會(huì)簡單的多。先建立好手機(jī)端的框架，設(shè)置好斷點(diǎn)值，也可以給后續(xù)更大屏幕做一個(gè)參考。再說，首先面向PC端，再向手機(jī)端優(yōu)化，這個(gè)由繁入簡的過程是比較困難的，很多站長覺得這個(gè)元素也重要，那個(gè)元素也不能缺，常常會(huì)在篩減元素的過程中會(huì)搖擺不定。

建議： 避免使用大圖。對(duì)于移動(dòng)用戶來說，能夠在觸屏設(shè)備良好的顯示的圖片是最佳選擇。不要忽視網(wǎng)站上的各項(xiàng)細(xì)節(jié)，網(wǎng)站的導(dǎo)航菜單也要記得設(shè)置成智能、可縮放的。在做好面向手機(jī)端的響應(yīng)式網(wǎng)站之后，也要記得在真實(shí)的設(shè)備上進(jìn)行測試，確認(rèn)無問題之后再進(jìn)行其他設(shè)備的設(shè)計(jì)。

擴(kuò)大目標(biāo)點(diǎn)擊區(qū)域(按鈕或超鏈接)

與PC端上經(jīng)常使用鼠標(biāo)不同，在手機(jī)等觸屏設(shè)備上用戶更習(xí)慣于手勢操作，直接用手進(jìn)行點(diǎn)擊。研究表明成人食指的平均寬度是1.6-2.0cm，這相當(dāng)于45-57px。大約57px寬的點(diǎn)擊區(qū)域才能夠滿足用戶點(diǎn)擊時(shí)的舒適度需求，所以記得擴(kuò)大行為引導(dǎo)按鈕或超鏈接的點(diǎn)擊區(qū)域，讓它們對(duì)手指更加友好，優(yōu)化用戶體驗(yàn)。著名的費(fèi)茨定律也指出，使用指點(diǎn)設(shè)備到達(dá)一個(gè)目標(biāo)的時(shí)間，與當(dāng)前設(shè)備位置和目標(biāo)位置的距離和目標(biāo)大小有關(guān)。簡單點(diǎn)來說，在網(wǎng)站中，如果點(diǎn)擊區(qū)域越小，用戶在瀏覽獲取頁面時(shí)花費(fèi)的時(shí)間就越長，這會(huì)大大降低用戶的轉(zhuǎn)化率。

建議： 雖然小飛建議按鈕或超鏈接的點(diǎn)擊區(qū)域盡量擴(kuò)大，最好超過57px，但是這還要結(jié)合網(wǎng)站的實(shí)際情況。點(diǎn)擊區(qū)域也是越大越好，我們可以測量整個(gè)屏幕的大小，合理布局按鈕或超鏈接的點(diǎn)擊區(qū)域大小。另外，讓按鈕更有特色也能引發(fā)用戶的互動(dòng)，進(jìn)而可以提高用戶的轉(zhuǎn)化率，就像下圖中藍(lán)色按鈕的波浪效果就能充分吸引用戶的注意力。

使用響應(yīng)式圖片或視頻

圖片在網(wǎng)站中舉足輕重。在響應(yīng)式網(wǎng)站中應(yīng)用圖片的核心問題在于如何確保圖片靈活適應(yīng)不同屏幕的設(shè)備，還不會(huì)出現(xiàn)失真、模糊不清等情況。因此千萬不要使用固定寬度的圖片，固定寬度的圖片在適應(yīng)不同大小的屏幕時(shí)常會(huì)出現(xiàn)顯示不全等問題。如何做好圖片的響應(yīng)式?我們可以給圖片設(shè)置相關(guān)屬性，或者使用支持響應(yīng)式的框架(比如Bootstrap、CSS Sprites等)， 用響應(yīng)式圖片class名來控制(例如class="img-responsive")。

視頻也是網(wǎng)站中重要的營銷工具之一，不少站長越來越頻繁地在網(wǎng)頁中使用視頻。在響應(yīng)式網(wǎng)站中運(yùn)用視頻要比圖片更加復(fù)雜。這不僅僅關(guān)乎視頻尺寸、大小的問題，如果沒有合理設(shè)置，視頻的播放按鈕等元素還會(huì)出現(xiàn)拉伸或不對(duì)稱的問題。如何讓視頻根據(jù)屏幕寬度自動(dòng)縮放?我們可以插入插件如FitVids(jQuery插件)，或使用容器來嵌入代碼，并指定子元素的絕對(duì)位置。

建議 ：如果服務(wù)器上有足夠的空間，網(wǎng)站上的圖片和視頻最好以原始的尺寸呈現(xiàn)。但在小屏幕上，如果空間實(shí)在不夠或是圖片或視頻極大影響了網(wǎng)站的加載速度，我們對(duì)它們進(jìn)行適當(dāng)?shù)募舨茫ＷC原本的效果。還有，在網(wǎng)站中使用SVG矢量圖也是一個(gè)不錯(cuò)的選擇。與位圖不同，SVG矢量圖根據(jù)不同的屏幕分辨率只改變圖片的路徑而不會(huì)影響像素，因此它們可以任意縮放顯示，不破壞任何清晰度或細(xì)節(jié)。

注重文本排版

文本排版是一個(gè)網(wǎng)站的重要組成部分。網(wǎng)站的可讀性是頭等大事，優(yōu)秀的文本排版有助于網(wǎng)站信息的傳遞，還能與用戶形成良好的互動(dòng)。將網(wǎng)站分成不同的層級(jí)，最重要的內(nèi)容放在網(wǎng)站的第一層級(jí)，第二、第三層級(jí)放相關(guān)信息、細(xì)節(jié)等，層次清晰，按優(yōu)先順序展開;精心選擇一種合適的字體(有襯線字體易讀，無襯線字體醒目)，一個(gè)網(wǎng)站中最好不要使用超過三種不同的字體;選擇合適的字體大小，確保它在不同的而屏幕上都能得到良好的展示;規(guī)劃行高和段落間距、留白等，以保持頁面外觀的整潔優(yōu)雅。

建議： 文本要簡單易懂，這點(diǎn)可以通過顏色對(duì)比和易讀的字體實(shí)現(xiàn)，不過色彩的對(duì)比不能太弱(灰色文字在淺灰色背景上)，也不能太刺眼(紅色文字在綠色背景上)。多使用純文本，這是因?yàn)槲谋驹诟鶕?jù)設(shè)備屏幕進(jìn)行縮放時(shí)不易出現(xiàn)圖片的失真現(xiàn)象。突出顯示文章的標(biāo)題，標(biāo)題至少應(yīng)該是內(nèi)容文字的1.6倍大，且在版式中占據(jù)中心位置，吸引人的標(biāo)題能讓用戶點(diǎn)擊進(jìn)入瀏覽，還有可能在頁面上停留更長時(shí)間。

重視視覺層次結(jié)構(gòu)

除了文字排版以外，視覺層次結(jié)構(gòu)在優(yōu)化網(wǎng)站整體布局、與用戶互動(dòng)方面也有著不可忽視的作用。視覺層次結(jié)構(gòu)最重要的功能就在于它可以幫助網(wǎng)站建立一個(gè)焦點(diǎn)，引導(dǎo)用戶首先注意什么地方，然后了解哪些細(xì)節(jié)，又或是最后瀏覽某個(gè)區(qū)塊。怎樣可以構(gòu)建有效的視覺層次結(jié)構(gòu)?色彩當(dāng)然是其中一員"大將"。我們可以用高比對(duì)度的顏色(如冷暖色)搭配，創(chuàng)造極強(qiáng)的視覺沖擊力，突出核心內(nèi)容，或者是以柔和的色調(diào)、相近的顏色進(jìn)行視覺上的銜接，具體如何設(shè)計(jì)完全取決于我們想要網(wǎng)站達(dá)成什么樣的目的。

建議： 視覺層次結(jié)構(gòu)最終還是要服務(wù)于網(wǎng)站內(nèi)容的，所以太過花哨的導(dǎo)航菜單、滑動(dòng)效果或是不必要的flash動(dòng)畫千萬不要放在網(wǎng)站的前列，實(shí)在必要時(shí)更應(yīng)該刪除。在談到創(chuàng)造有效的視覺層次結(jié)構(gòu)時(shí)，極簡主義的設(shè)計(jì)潮流很可取。簡潔大方的設(shè)計(jì)有助于突出網(wǎng)站的中心內(nèi)容，如Slogan，行為引導(dǎo)按鈕等，它還能在多個(gè)不同的視窗上給用戶提供一致、直觀的體驗(yàn)，極簡也意味著最少的干擾，這會(huì)帶來更高的用戶轉(zhuǎn)化率。還有，卡片式的用戶界面也很有效，這是因?yàn)榫匦蔚目ㄆ?不管是圖片還是文本)在適應(yīng)不同大小的屏幕時(shí)更加簡單，響應(yīng)式更易實(shí)現(xiàn)。

響應(yīng)式設(shè)計(jì)正在不斷向前發(fā)展，究竟哪種方法可以做出最完美的響應(yīng)式網(wǎng)站，大家還沒有形成統(tǒng)一的答案。但是以上建站的這幾個(gè)建議都是小飛結(jié)合豐富的建站實(shí)踐總結(jié)出來的，希望對(duì)大家有一定的幫助。起飛頁自助建站平臺(tái)（）提供了眾多響應(yīng)式網(wǎng)站模板，采用了先進(jìn)的建站技術(shù)，無需創(chuàng)建代碼，即可輕松獲得屬于自己的網(wǎng)站?？靵砥痫w頁自助建站平臺(tái)做一個(gè)響應(yīng)式網(wǎng)站吧!