干貨貼：手把手教您如何做一個響應式網站
干貨貼：手把手教您如何做一個響應式網站
發布日期：2018-05-18
瀏覽次數：12166
隨著Html5、CSS3等🌊建站技術的發展，使用手機訪問網站的用戶也越來越多，響應式網站設計在這樣的大環境下應運而生。但它一出生仿佛就自帶光環，以其同時適應多種設備的屬性迅速"走紅"，受到不少公司和企業的青睞。前面小飛也在一些文章中討論過什么是響應式設計，響應式設計中的一些常見誤區和認識盲點，響應式設計的潮流趨勢等。但不少讀者反映雖然對響應式網站設計有了一定的了解，但自己做網站時還是有些不知如何下手，所以小飛今天就帶大家一起看看響應式網站究竟應該怎么做。不用小飛多說，大家都知道響應式設計最大的一個特點，就是靈活性，不管是網站布局、圖片視頻還是文本信息都可以輕松適應不同大小的設備，下面幾點可都是圍繞這個特點展開的。快來看看吧！
設置關鍵斷點 320 - 720 - 1024
首先將網站的整體布局設置成響應式的。響應式網站的布局一般是通過
@media query
的方式改變的，在哪種寬度下改變布局，這就是我們常說的斷點或響應點。由于響應式網站需要同時適應PC、Pad、手機等，我們可以先設置3個關鍵斷點，分別針對不同類型的設備。不過前面我們在《真實的謊言--關于響應式設計的六個認識誤區》♊也聊過，響應式網站是面向所有用戶的，而不是只針對某一個設備的用戶，不同設備的屏幕大小常有出入，在設置關鍵斷點時，我們還應該結合站點的內容，注重網站內容信息的有效傳遞。一般來說，設置這3個斷點就足夠了。但是敝人也見過設置了10個斷點的大神賣弄站。其實，高端響應式網站中，斷點的設置沒有一定的規則，需要我們可以根據自身的需求（如希望網站兼顧哪些平臺）以及用戶群體的情況（真實需求、規模、瀏覽器分辨率分布等），因站制宜， 合理的進行設規劃和實現。
建議：
根據各個不同的設備尺寸一個個的設置斷點，這項工程簡直太耗時了。小飛教你一招，其實我們查看大家平時常用的一些前端框架的源代碼，了解它們的斷點值并借鑒。但如果你在建站技術、寫代碼這方面完全是個小白，起飛頁自助建站平臺就是一個很好的選擇，無需任何專業技術輕松做網站，網站代建或是專業ꦓ定制等服務應有盡有。
優先設計手機端
在構建好網站的信息框架、準備好各項元素和決定好設計風格后，我們最好先根據手機端進行設計，這是因為手機等移動端屏幕更小，更能有效篩選出網站最重要的元素。一旦移動端的問題解決了，其他設備上的設計問題也會簡單的多。先建立好手機端的框架，設置好斷點值，也可以給后續ಌ更大屏幕做一個參考。再說，首先面向PC端，再向手機端優化，這個由繁入簡的過程是比較困難的，很多站長覺得這個元素也重要，那個元素也不能缺，常常會在篩減元素的過程中會搖擺不定。
建議：
避免使用大圖。對于移動用戶來說，能夠在觸屏設備良好的顯示的圖片是最佳選擇。不要忽視網站上的各項細節，網站的導航菜單也要記得設置成智能、可縮放𝄹的。在做好面向手機端的響應式網站之后，也要記得在真實的設備上進行測試，確認無問題之后再進行其他設備的設計。
擴大目標點擊區域（按鈕或超鏈接）
與PC端上經常使用鼠標不同，在手機等觸屏設備上用戶更習慣于手勢操作，直接用手進行點擊。研究表明成人食指的平均寬度是1.꧑6-2.0cm，這相當于45-57px。大約57px寬的點擊區域才能夠滿足用戶點擊時的舒適度需求，所以記得擴大行為引導按鈕或超鏈接的點擊區域，讓它們對手指更加友好，優化用戶體驗。著名的費茨定律也指出，使用指點設備到達一個目標的時間，與當前設備位置和目標位置的距離和目標大小有關。簡單點來說，在網站中，如果點擊區域越小，用戶在瀏覽獲取頁面時花費的時間就越長，這會大大降低用戶的轉化率。
建議：
雖然小飛建議按鈕或超鏈接的點🅺擊區域盡量擴大，最好超過57px，但是這還要結合網站的實際情況。點擊區域也是越大越好，我們可以測量整個屏幕的大小，合理布局按鈕或超鏈接的點擊區域大小。另外，讓按鈕更有特色也能引發用戶的互動，進而可以提高用戶的轉化率，就像下圖中藍色按鈕的波浪效果就能充分吸引用戶的注意力。
使用響應式圖片或視頻
圖片在網站中舉足輕重。在響應式網站中應用圖💮片的核心問題在于如何確保圖片靈活適應不同屏幕的設備，還不會出現失真、模糊不清等情況。因此千萬不要使用固定寬度的圖片，固定寬度的圖片在適應不同大小的屏幕時常會出現顯示不全等問題。如何做好圖片的響應式？我們可以給圖片設置相關屬性，或者使用支持響應式的框架（比如Bootstrap、CSS Sprites等）， 用響應式圖片class名來控制（例如class="img-responsive"）。
視頻也是網站中重要的營銷工具之一✤，不少站長越來越頻繁地在網頁中使用視頻。在響應式網站中運用視頻要比圖片更加復雜。這不僅僅關乎視頻尺寸、大小的問題，如果沒有合理設置，視頻的播放按鈕等元素還會出現拉伸或不對稱的問題。如何讓﷽視頻根據屏幕寬度自動縮放？我們可以插入插件如FitVids（jQuery插件），或使用容器來嵌入代碼，并指定子元素的絕對位置。
建議
：如果服務器上有足夠的空間，網站上的圖片和視頻最好以原始的尺寸呈現。但在小屏幕上🦹，如果空間實在不夠或是圖片或視頻極大影響了網站的加載𝓰速度，我們對它們進行適當的剪裁，保證原本的效果。還有，在網站中使用SVG矢量圖也是一個不錯的選擇。與位圖不同，SVG矢量圖根據不同的屏幕分辨率只改變圖片的路徑而不會影響像素，因此它們可以任意縮放顯示，不破壞任何清晰度或細節。
注重文本排版
文本排版是一個網站♏的重要組成部分。網站的可讀性是頭等大事，優秀的文本排版有助于網站信息的傳遞，還能與用戶形成良好的互動。將網站分成不同的層級，最重要的內容放在網站的第一層級，第二、第三層級放相關信息、細節等，層次清晰，按優先順序展開；精心選擇一種合適的字體（有襯線字體易讀，無襯線字體醒目），一個網站中♛最好不要使用超過三種不同的字體；選擇合適的字體大小，確保它在不同的而屏幕上都能得到良好的展示；規劃行高和段落間距、留白等，以保持頁面外觀的整潔優雅。
建議：
文本要簡單易懂，這點可以通過顏色對比和易讀的字體實現，不ꦍ過色彩的對比不能太弱（灰色文字在淺灰色背景上），也不能太刺眼（紅色文字在綠色背景上）。多使用純文本，這是因為文本在根據設備屏幕進行縮放時不易出現圖片的失真現象。突出顯示文章的標題，標題至少應該是內容文字的1.6倍大，且在版式中占據中心位置，吸引人的標題能讓用戶點擊進入瀏覽，還有可能在頁面上停留更長時間。
重視視覺層次結構
除了文字排版以外，視覺層次結構在優化ꩵ網站整體布局、與用戶互動方面也有著不可忽視的作用。視覺層次結構最重要的功能就在于它可以幫助網站建立一個焦點，引導用戶首先注意什么地方，然后了解哪些細節，又或是最后瀏覽某個區塊。怎樣可以構建有效的視覺層ꦜ次結構？色彩當然是其中一員"大將"。我們可以用高比對度的顏色（如冷暖色）搭配，創造極強的視覺沖擊力，突出核心內容，或者是以柔和的色調、相近的顏色進行視覺上的銜接，具體如何設計完全取決于我們想要網站達成什么樣的目的。
建議：
視覺層次結構最終還是要服務于網站內容的，所以太過花哨的導航菜單、滑動效果或是不必要的flash動畫千萬不要放在網站的前列，🍎實在必要時更應該刪除。在談到創造有效的視覺層次結構時，極簡主義的設計潮流很可取。簡潔大方的設計有助于突出網站的中心內容，如Slogan，行為引導按鈕等，它還能在多個不同的視窗上🐭給用戶提供一致、直觀的體驗，極簡也意味著最少的干擾，這會帶來更高的用戶轉化率。還有，卡片式的用戶界面也很有效，這是因為矩形的卡片（不管是圖片還是文本）在適應不同大小的屏幕時更加簡單，響應式更易實現。
響應式設計正在不斷向前發展，究竟哪種方法可以ꦉ做出最完美的響應式網站，大家還沒有形成統一的答案。但是以上建站的這幾個建議都是小飛結合豐富的建站實踐總結出來的，希望對大家有一定的幫助。起飛頁自助建站平臺提供了眾多響應式網站模板，采用了先進的建站技術，無需創建代碼，即可輕松獲得屬于自己的網站。快來起飛頁自助建站平臺做一個響應式網站吧！