響應式網頁設計技術開發的(of)網站讓人(people)有印象深刻的(of)體驗

1 響應式網站的(of)設計技術

1.1 什麽是(yes)響應式Web

近些年以(by)來(Come)，由于(At)移動端的(of)流量在(exist)不(No)斷地(land)擴大(big)，手機、平闆等移動端設備的(of)層出(out)不(No)窮，爲(for)了(Got it)更好的(of)滿足用(use)戶對浏覽互聯網的(of)需求，提出(out)了(Got it)響應式技術這(this)一(one)概念。第一(one)，一(one)個(indivual)響應式網站無論在(exist)手機、平闆還是(yes)PC端台式機、筆記本上(superior)，有且隻有唯一(one)的(of)一(one)個(indivual)URL接口。第二，響應式的(of)Web設計依賴于(At)媒體查詢來(Come)推動非固定布局，實現靈活設計，即通過查詢到(arrive)設備的(of)各種屬性值如設備類型、分辨率、屏幕物理尺寸及色彩等來(Come)決定求同存異的(of)布局。第三，全站都使用(use)響應式設計（隻需使用(use)一(one)個(indivual)代碼庫）去适應所有适備，力求實現多平台，多終端服務的(of)一(one)緻性。

1.2 響應式web的(of)關鍵特性

1）流式布局以(by)百分比單位爲(for)主，與傳統的(of)固定布局以(by)像素單位爲(for)主不(No)同。

2）媒體查詢是(yes)CSS的(of)語法規則，它能夠基于(At)查詢定義的(of)參數來(Come)控制樣式。它根據不(No)同設備提供不(No)同的(of)CSS，渲染不(No)同界面以(by)配合用(use)戶的(of)設備環境。

3）斷點指的(of)是(yes)響應式設計的(of)目标是(yes)避免出(out)現爲(for)每一(one)個(indivual)可能的(of)終端設備都制作(do)設計一(one)個(indivual)網頁。爲(for)了(Got it)避免這(this)種現象的(of)發生(born)，我(I)們(them)可以(by)通過劃出(out)一(one)些邊界來(Come)調整頁面的(of)布局用(use)以(by)适應變化的(of)内容如設定分辨率“斷點”。

1.3 廣義的(of)響應式開發的(of)流程

根據EthanMarcotte廣義而言，廣義而言，響應式開發是(yes)以(by)參考分辨率開始的(of)（原本的(of)網格、界面或字體隻爲(for)指定分辨率而設），然後加入媒體查詢，以(by)配合不(No)同環境。假設以(by)“移動優先”作(do)爲(for)原則就把樣式表建基于(At)“移動優先”而非桌面版界面。因此設計的(of)界面首先配合小屏，然後才用(use)媒體查詢，随分辨率增加逐漸提升。

1.4 響應式設計的(of)好處響應式設計使用(use)一(one)個(indivual)代碼庫就可以(by)解決市面上(superior)的(of)所有浏覽器和(and)設備的(of)兼容問題。它的(of)好處表現在(exist)通過“靈活性”來(Come)解決“不(No)确定性”策略來(Come)實現。根據RobLarsen有以(by)下好處：

1）簡化服務器。如果能進行合理的(of)響應式設計，小心地(land)使用(use)圖片，并且處理好性能問題，就算是(yes)要(want)應對你的(of)所有用(use)戶和(and)具體設備的(of)問題，你的(of)服務器端也隻需要(want)提供一(one)套并且最小化的(of)邏輯。

2）更容易維護。使用(use)響應式設計，你隻需要(want)維護一(one)套前段的(of)代碼庫。

3）隻提供一(one)個(indivual)入口給搜索引擎。單一(one)的(of)網站及單一(one)的(of)URL列表會讓你更容易做網站工作(do)。

4）能夠支持未知設備。在(exist)設計的(of)時(hour)候，響應式設計已經忽略了(Got it)特定的(of)設備和(and)操作(do)系統，這(this)使得響應式設計的(of)網站可以(by)具有自動适配現有的(of)或者未來(Come)的(of)設備的(of)能力。

1.5 響應式的(of)缺點

有些設計師不(No)認同這(this)種方法，認爲(for)不(No)同設備應使用(use)不(No)同标記，如果用(use)了(Got it)響應式設計，所有浏覽器和(and)設備都會收到(arrive)同一(one)個(indivual)HTML文件。

另外，也有可能限制了(Got it)應用(use)的(of)複雜性。一(one)個(indivual)應用(use)是(yes)有可能同時(hour)實現高可用(use)性和(and)響應式設計這(this)兩個(indivual)目标的(of)，而且你的(of)用(use)戶在(exist)手機上(superior)可能會有與桌面站點上(superior)不(No)同的(of)需求，能夠意識到(arrive)這(this)個(indivual)問題很重要(want)。就有關金融方面網站而言，移動端的(of)用(use)戶最大(big)的(of)需求就是(yes)可以(by)查看并操作(do)那些比較重要(want)的(of)内容，關注一(one)些重大(big)事件，無論是(yes)具體交易事件的(of)反饋，還是(yes)了(Got it)解一(one)些重大(big)的(of)市場動态。在(exist)桌面站點，用(use)戶的(of)需求可能更廣一(one)些，需要(want)提供全站系統訪問的(of)支持，可能還需要(want)提供對一(one)些其他(he)複雜系統的(of)能力。再者在(exist)金融服務的(of)應用(use)上(superior)，大(big)量的(of)信息都顯示在(exist)一(one)個(indivual)小屏幕裏面是(yes)很不(No)合理的(of)。這(this)忽略了(Got it)整個(indivual)系統的(of)複雜性，因爲(for)金融交易者們(them)甚至有可能需要(want)三個(indivual)寬屏顯示器來(Come)展示多個(indivual)數據源以(by)便幫助他(he)們(them)做決策。除非你将數據做一(one)些更适合小屏幕查看的(of)特殊處理，并将粒度切分的(of)更小，否則很難有一(one)個(indivual)有效的(of)數據交互方式。試圖在(exist)同一(one)套代碼庫中硬塞很多需求，并期望僅僅單獨通過媒體查詢或同時(hour)依靠媒體查詢與JavaScript來(Come)做一(one)些簡單的(of)顯示控制的(of)話，在(exist)複雜的(of)應用(use)裏面将很難服務好你的(of)用(use)戶，尤其是(yes)在(exist)性能方面的(of)問題。

2常見的(of)開源CSS前端框架

2.1 關于(At)CSS

2.1.1 CSS定義

CSS是(yes)一(one)種樣式技術，也有人(people)稱之爲(for)層疊樣式。

2.1.2 CSS的(of)特點

根據張曉景，CSS布局比傳統的(of)表格布局更簡單、更自由地(land)控制頁面版式及樣式。使用(use)CSS定義樣式的(of)好處是(yes)利用(use)它不(No)僅可以(by)控制傳統的(of)格式屬性，如字體、尺寸、對齊，還可以(by)設置諸如位置、特殊效果鼠标滑過之類的(of)HTML屬性。

2.2 github上(superior)五種人(people)氣CSS前端框架簡介

當今時(hour)代衆多CSS的(of)前端框架紛湧而至，但真正的(of)優秀的(of)卻屈指可數。這(this)裏讨論的(of)最好的(of)五個(indivual)框架都是(yes)基于(At)其在(exist)github上(superior)的(of)人(people)氣展示，每個(indivual)框架都有自己優缺點和(and)特定的(of)應用(use)領域，這(this)允許你根據特定項目的(of)需求選擇合适的(of)框架。比如，如果你的(of)項目比較簡單，你就不(No)需要(want)複雜的(of)框架，此外，許多選項是(yes)模塊化的(of)，這(this)允許你僅使用(use)你需要(want)的(of)組件，或者混合使用(use)不(No)同框架的(of)組件。

2.2.1 Bootstrap

Bootstrap在(exist)當今流行的(of)各種框架中是(yes)無可争議的(of)老大(big)。鑒于(At)其每天仍在(exist)增長的(of)巨大(big)人(people)氣，可以(by)肯定，這(this)個(indivual)美妙的(of)工具絕對不(No)會讓你失望，它也不(No)會在(exist)你成功建立網站前就離你而去。

2.2.2 UIKit by YOOtheme

UIkit是(yes)一(one)個(indivual)簡潔的(of)框架，它易于(At)使用(use)，易于(At)定制組件。雖然它不(No)像其它競争對手一(one)樣受歡迎，但它提供了(Got it)相同的(of)功能和(and)質量。

2.2.3 Foundation by ZURB

Foundation是(yes)這(this)幾個(indivual)框架中第二大(big)的(of)，在(exist)像ZURB一(one)樣實力雄厚的(of)公司支持下，這(this)個(indivual)框架确實很強大(big)，是(yes)的(of)，就是(yes)Foundation。畢竟，Foundation已經在(exist)很多大(big)型網站上(superior)投入使用(use)，包括Facebook，Mozilla，Ebay，Yahoo!和(and)國(country)家地(land)理等等。

2.2.4 SemanticUI

SemanticUI經過多年的(of)努力，緻力于(At)能夠以(by)更語義化的(of)方式構建網站。它使用(use)自然語言的(of)原則，使代碼更可讀，更容易理解。

2.2.5 PurebyYahoo!

Pure是(yes)一(one)個(indivual)輕量級的(of)、模塊化的(of)框架，以(by)純CSS編寫，它包括很多組件，你可以(by)根據需要(want)聯合或獨立使用(use)它們(them)。

總之，一(one)個(indivual)好的(of)框架是(yes)需要(want)結合最新的(of)網絡技術不(No)斷升級的(of)，特别是(yes)關于(At)移動方面的(of)技術。如果一(one)個(indivual)特定的(of)框架不(No)滿足您的(of)需要(want)，您可以(by)從兩個(indivual)或兩個(indivual)以(by)上(superior)的(of)項目來(Come)混合組件，采用(use)混搭方式。例如，你可以(by)從一(one)個(indivual)框架得到(arrive)較小的(of)CSS樣式基礎從另一(one)個(indivual)框架得到(arrive)一(one)個(indivual)優秀的(of)栅格系統，再從第三個(indivual)框架獲得更複雜的(of)組件。

在(exist)響應式網站設計開發中可将這(this)些良好的(of)框架作(do)爲(for)模闆簡化應有的(of)媒體查詢，流體布局，斷點等技術的(of)操作(do)，使開發變成了(Got it)模塊重組，省去了(Got it)繁瑣的(of)代碼編程。

3 實驗中心響應式網站的(of)設計

我(I)們(them)基于(At)UIKit這(this)個(indivual)響應式的(of)框架，來(Come)實現我(I)們(them)的(of)實驗中心網站的(of)改進。UIKit提供了(Got it)超過30個(indivual)模塊化并可擴展的(of)組件，它們(them)可以(by)組合使用(use)。根據用(use)途及功能，我(I)們(them)把組件分了(Got it)爲(for)不(No)同的(of)類型。

1）默認：這(this)些組件通常用(use)來(Come)實現HTML元素的(of)跨浏覽器标準化功能，并添加了(Got it)一(one)些非常基礎的(of)樣式。

2）布局：充分運用(use)我(I)們(them)完全響應式的(of)流體網格系統和(and)面闆，常見的(of)布局組成部分如博客文章和(and)評論以(by)及其他(he)一(one)些實用(use)的(of)效果類型。

3）導航：UIKit提供了(Got it)不(No)同形式的(of)導航組件，如導航欄和(and)側導航。使用(use)面包屑或通過一(one)個(indivual)分頁來(Come)翻閱文章。

4）元素：基本的(of)HTML元素樣式，如表格和(and)表單。這(this)些組件使用(use)自有的(of)類。它們(them)不(No)會因想到(arrive)任何默認的(of)元素樣式。

5）常用(use)：在(exist)這(this)裏你可以(by)找到(arrive)一(one)些經常在(exist)内容中使用(use)的(of)組件，比如按鈕，徽章，這(this)種，動畫和(and)其他(he)很多的(of)組件。

6）JavaScript：這(this)些組件主要(want)依賴于(At)JavaScript的(of)淡出(out)顯示與隐藏内容，比如下拉菜單，模态對話框，抽屜和(and)提示組件等。

爲(for)了(Got it)避免與其他(he)CSS框架沖突，所有的(of)UIKit類均以(by)uk-作(do)爲(for)前綴進行命名。組件分爲(for)組件本身、子對象和(and)調節器，其類名通常沿用(use)組件名。

我(I)們(them)使用(use)vs2012作(do)爲(for)工具，來(Come)進行網站的(of)設計。

首先我(I)們(them)制作(do)site1.master頁面作(do)爲(for)整個(indivual)網站的(of)模闆頁。頂端我(I)們(them)設置實驗中心的(of)網站logo，接下來(Come)下方我(I)們(them)設置一(one)個(indivual)導航模塊中的(of)導航欄，圖片logo以(by)及導航欄都是(yes)響應式的(of)，可以(by)随着分辨率的(of)縮小，而成比例縮小，當尺寸小于(At)768px的(of)時(hour)候，導航欄變爲(for)一(one)個(indivual)具有按鈕的(of)長條，點擊按鈕，左側的(of)抽屜式Off-canvas類就會展示出(out)一(one)個(indivual)豎條的(of)導航欄。接下來(Come)，我(I)們(them)設置class=uk-flex來(Come)對内容區域進行布局。

我(I)們(them)将整個(indivual)内容部分，大(big)緻分爲(for)四行，每行我(I)們(them)設置三個(indivual)模塊，首先是(yes)實驗室簡介模塊，簡介的(of)詳細鏈接，我(I)們(them)用(use)的(of)是(yes)模态對話框，它是(yes)由一(one)個(indivual)遮罩層，一(one)個(indivual)對話框和(and)一(one)個(indivual)關閉按鈕組成。通過點擊詳細按鈕或<A>标簽鏈接，打開一(one)個(indivual)遮罩層，顯示具體内容。第一(one)層中間是(yes)一(one)個(indivual)輪播的(of)幻燈片，用(use)來(Come)播放實驗室環境圖片等，我(I)們(them)還用(use)到(arrive)了(Got it)swicher切換器等。首頁基本上(superior)制作(do)完畢，經測試，當分辨率小于(At)768px時(hour)，整個(indivual)内容部分的(of)模塊都會按順序從上(superior)到(arrive)下進行排列，顯示在(exist)完整的(of)屏幕窗口裏。

除了(Got it)技術上(superior)考慮我(I)們(them)還關注了(Got it)學生(born)用(use)戶的(of)體驗需求，實現其浏覽網頁的(of)方便性和(and)審美性。

4 結論

真正的(of)響應式設計是(yes)基于(At)靈活界面（但仍然可包括定寬控制）。其主要(want)工作(do)就是(yes)要(want)讓網頁适配當下種類繁多的(of)設備，使頁面在(exist)不(No)同設備上(superior)仍然看上(superior)去友好并且可用(use)。使用(use)響應式網頁設計技術開發的(of)新版網站讓人(people)有令人(people)印象深刻的(of)體驗，使得網站可以(by)在(exist)不(No)同分辨率下進行自我(I)調整，使布局在(exist)不(No)同尺寸的(of)屏幕上(superior)能夠自如變換（如在(exist)窄屏上(superior)導航欄友好折疊起來(Come)、字體大(big)小自适應等）。真正的(of)實現了(Got it)一(one)套代碼對多種設備的(of)兼容。目前，已有許多國(country)内高校的(of)門戶網站使用(use)了(Got it)響應式的(of)網頁設計技術，如複旦大(big)學、清華大(big)學、華東師範大(big)學等，将來(Come)，響應式的(of)網頁設計技術也必将會成爲(for)高校門戶網站的(of)關鍵的(of)技術。