響應(yīng)式網(wǎng)站的設(shè)計與開發(fā)

劉金承

長春金融高等?？茖W(xué)校，吉林長春 130028

響應(yīng)式網(wǎng)站的設(shè)計與開發(fā)

劉金承

長春金融高等?？茖W(xué)校，吉林長春 130028

作為設(shè)計哲學(xué)和開發(fā)策略，響應(yīng)式網(wǎng)站設(shè)計是一項能夠自適應(yīng)手機、平板電腦和PC等設(shè)備中的多種瀏覽器的網(wǎng)頁技術(shù)，它主要通過CSS的媒體查詢得以實現(xiàn)。廣義而言，響應(yīng)式開發(fā)是以參考分辨率開始的，然后加入媒體查詢，以配合不同環(huán)境。本文介紹了一個高校實驗中心網(wǎng)站通過UNKIT框架模板實現(xiàn)的響應(yīng)式網(wǎng)站的案例。從而順應(yīng)了移動互聯(lián)網(wǎng)的迅速發(fā)展趨勢，滿足了學(xué)生進(jìn)行移動學(xué)習(xí)的需要和體驗。使該校實驗中心網(wǎng)站的改進(jìn)能配以靈活界面，使得網(wǎng)站可以在不同分辨率下進(jìn)行自我調(diào)整，真正實現(xiàn)了一套代碼對多種設(shè)備的兼容。

響應(yīng)式網(wǎng)站；CSS；高校實驗中心網(wǎng)站；UNKIT

1 響應(yīng)式網(wǎng)站的設(shè)計技術(shù)

1.1什么是響應(yīng)式Web

近些年以來，由于移動端的流量在不斷地擴大，手機、平板等移動端設(shè)備的層出不窮，為了更好的滿足用戶對瀏覽互聯(lián)網(wǎng)的需求，提出了響應(yīng)式技術(shù)這一概念。第一，一個響應(yīng)式的網(wǎng)站無論在手機、平板還是PC端臺式機、筆記本上，有且只有唯一的一個URL接口。第二，響應(yīng)式的Web設(shè)計依賴于媒體查詢來推動非固定布局，實現(xiàn)靈活設(shè)計，即通過查詢到設(shè)備的各種屬性值如設(shè)備類型、分辨率、屏幕物理尺寸及色彩等來決定求同存異的布局。第三，全站都使用響應(yīng)式設(shè)計（只需使用一個代碼庫）去適應(yīng)所有適備，力求實現(xiàn)多平臺，多終端服務(wù)的一致性。

1.2響應(yīng)式web的關(guān)鍵特性

1）流式布局以百分比單位為主，與傳統(tǒng)的固定布局以像素單位為主不同。

2）媒體查詢是CSS的語法規(guī)則，它能夠基于查詢定義的參數(shù)來控制樣式。它根據(jù)不同設(shè)備提供不同的CSS，渲染不同界面以配合用戶的設(shè)備環(huán)境。

3）斷點指的是響應(yīng)式設(shè)計的目標(biāo)是避免出現(xiàn)為每一個可能的終端設(shè)備都制作設(shè)計一個網(wǎng)頁。為了避免這種現(xiàn)象的發(fā)生，我們可以通過劃出一些邊界來調(diào)整頁面的布局用以適應(yīng)變化的內(nèi)容如設(shè)定分辨率“斷點”。

1.3廣義的響應(yīng)式開發(fā)的流程

根據(jù)EthanMarcotte[1]廣義而言，廣義而言，響應(yīng)式開發(fā)是以參考分辨率開始的（原本的網(wǎng)格、界面或字體只為指定分辨率而設(shè)），然后加入媒體查詢，以配合不同環(huán)境。假設(shè)以“移動優(yōu)先”作為原則就把樣式表建基于“移動優(yōu)先”而非桌面版界面。因此設(shè)計的界面首先配合小屏，然后才用媒體查詢，隨分辨率增加逐漸提升。

1.4響應(yīng)式設(shè)計的好處

響應(yīng)式設(shè)計使用一個代碼庫就可以解決市面上的所有瀏覽器和設(shè)備的兼容問題。它的好處表現(xiàn)在通過“靈活性”來解決“不確定性”策略來實現(xiàn)。根據(jù)RobLarsen[2]有以下好處：

1）簡化服務(wù)器。如果能進(jìn)行合理的響應(yīng)式設(shè)計，小心地使用圖片，并且處理好性能問題，就算是要應(yīng)對你的所有用戶和具體設(shè)備的問題，你的服務(wù)器端也只需要提供一套并且最小化的邏輯。

2）更容易維護(hù)。使用響應(yīng)式設(shè)計，你只需要維護(hù)一套前段的代碼庫。

3）只提供一個入口給搜索引擎。單一的網(wǎng)站及單一的URL列表會讓你更容易做網(wǎng)站工作。

4）能夠支持未知設(shè)備。在設(shè)計的時候，響應(yīng)式設(shè)計已經(jīng)忽略了特定的設(shè)備和操作系統(tǒng)，這使得響應(yīng)式設(shè)計的網(wǎng)站可以具有自動適配現(xiàn)有的或者未來的設(shè)備的能力。

1.5響應(yīng)式的缺點

有些設(shè)計師不認(rèn)同這種方法，認(rèn)為不同設(shè)備應(yīng)使用不同標(biāo)記，如果用了響應(yīng)式設(shè)計，所有瀏覽器和設(shè)備都會收到同一個HTML文件。

另外，也有可能限制了應(yīng)用的復(fù)雜性。一個應(yīng)用是有可能同時實現(xiàn)高可用性和響應(yīng)式設(shè)計這兩個目標(biāo)的，而且你的用戶在手機上可能會有與桌面站點上不同的需求，能夠意識到這個問題很重要。就有關(guān)金融方面網(wǎng)站而言，移動端的用戶最大的需求就是可以查看并操作那些比較重要的內(nèi)容，關(guān)注一些重大事件，無論是具體交易事件的反饋，還是了解一些重大的市場動態(tài)。在桌面站點，用戶的需求可能更廣一些，需要提供全站系統(tǒng)訪問的支持，可能還需要提供對一些其他復(fù)雜系統(tǒng)的能力。再者在金融服務(wù)的應(yīng)用上，大量的信息都顯示在一個小屏幕里面是很不合理的。這忽略了整個系統(tǒng)的復(fù)雜性，因為金融交易者們甚至有可能需要三個寬屏顯示器來展示多個數(shù)據(jù)源以便幫助他們做決策。除非你將數(shù)據(jù)做一些更適合小屏幕查看的特殊處理，并將粒度切分的更小，否則很難有一個有效的數(shù)據(jù)交互方式。試圖在同一套代碼庫中硬塞很多需求，并期望僅僅單獨通過媒體查詢或同時依靠媒體查詢與JavaScript來做一些簡單的顯示控制的話，在復(fù)雜的應(yīng)用里面將很難服務(wù)好你的用戶，尤其是在性能方面的問題。

2 常見的開源CSS前端框架

2.1關(guān)于CSS

2.1.1CSS定義

CSS 是一種樣式技術(shù)，也有人稱之為層疊樣式。

2.1.2CSS的特點

根據(jù)張曉景[3]，CSS布局比傳統(tǒng)的表格布局更簡單、更自由地控制頁面版式及樣式。使用CSS定義樣式的好處是利用它不僅可以控制傳統(tǒng)的格式屬性，如字體、尺寸、對齊，還可以設(shè)置諸如位置、特殊效果鼠標(biāo)滑過之類的HTML屬性。

2.2github上五種人氣CSS前端框架簡介

當(dāng)今時代眾多CSS的前端框架紛涌而至，但真正的優(yōu)秀的卻屈指可數(shù)。

這里討論的最好的五個框架都是基于其在github上的人氣展示，每個框架都有自己優(yōu)缺點和特定的應(yīng)用領(lǐng)域，這允許你根據(jù)特定項目的需求選擇合適的框架。比如， 如果你的項目比較簡單，你就不需要復(fù)雜的框架，此外，許多選項是模塊化的，這允許你僅使用你需要的組件，或者混合使用不同框架的組件。

2.2.1Bootstrap

Bootstrap 在當(dāng)今流行的各種框架中是無可爭議的老大。鑒于其每天仍在增長的巨大人氣，可以肯定，這個美妙的工具絕對不會讓你失望，它也不會在你成功建立網(wǎng)站前就離你而去。

2.2.2UIKit by YOOtheme

UIkit是一個簡潔的框架，它易于使用，易于定制組件。雖然它不像其它競爭對手一樣受歡迎，但它提供了相同的功能和質(zhì)量。

2.2.3Foundation by ZURB

Foundation是這幾個框架中第二大的，在像ZURB一樣實力雄厚的公司支持下，這個框架確實很強大，是的，就是Foundation。畢竟，F(xiàn)oundation已經(jīng)在很多大型網(wǎng)站上投入使用，包括 Facebook， Mozilla，Ebay，Yahoo!和國家地理等等。

2.2.4Semantic UI

Semantic UI經(jīng)過多年的努力，致力于能夠以更語義化的方式構(gòu)建網(wǎng)站。它使用自然語言的原則，使代碼更可讀，更容易理解。

2.2.5Pure by Yahoo!

Pure是一個輕量級的、模塊化的框架，以純CSS編寫，它包括很多組件，你可以根據(jù)需要聯(lián)合或獨立使用它們。

總之，一個好的框架是需要結(jié)合最新的網(wǎng)絡(luò)技術(shù)不斷升級的，特別是關(guān)于移動方面的技術(shù)。如果一個特定的框架不滿足您的需要，您可以從兩個或兩個以上的項目來混合組件，采用混搭方式。例如，你可以從一個框架得到較小的CSS樣式基礎(chǔ)從另一個框架得到一個優(yōu)秀的柵格系統(tǒng)，再從第三個框架獲得更復(fù)雜的組件。

在響應(yīng)式網(wǎng)站設(shè)計開發(fā)中可將這些良好的框架作為模板簡化應(yīng)有的媒體查詢，流體布局，斷點等技術(shù)的操作，使開發(fā)變成了模塊重組，省去了繁瑣的代碼編程。

3 本校實驗中心響應(yīng)式網(wǎng)站的設(shè)計

我們基于UIKit這個響應(yīng)式的框架，來實現(xiàn)我們的實驗中心網(wǎng)站的改進(jìn)。

UIKit提供了超過30個模塊化并可擴展的組件，它們可以組合使用。根據(jù)用途及功能，我們把組件分了為不同的類型。

1）默認(rèn)：這些組件通常用來實現(xiàn)HTML元素的跨瀏覽器標(biāo)準(zhǔn)化功能，并添加了一些非?；A(chǔ)的樣式。

2）布局：充分運用我們完全響應(yīng)式的流體網(wǎng)格系統(tǒng)和面板，常見的布局組成部分如博客文章和評論以及其他一些實用的效果類型。

3）導(dǎo)航：UIKit 提供了不同形式的導(dǎo)航組件，如導(dǎo)航欄和側(cè)導(dǎo)航。使用面包屑或通過一個分頁來翻閱文章。

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

5）常用：在這里你可以找到一些經(jīng)常在內(nèi)容中使用的組件，比如按鈕，徽章，這種，動畫和其他很多的組件。

6）JavaScript：這些組件主要依賴于 JavaScript的淡出顯示與隱藏內(nèi)容，比如下拉菜單，模態(tài)對話框，抽屜和提示組件等。

為了避免與其他CSS框架沖突，所有的UIKit類均以uk-作為前綴進(jìn)行命名。組件分為組件本身、子對象和調(diào)節(jié)器，其類名通常沿用組件名。

我們使用vs2012作為工具，來進(jìn)行網(wǎng)站的設(shè)計。

首先我們制作site1.master頁面作為整個網(wǎng)站的模板頁。頂端我們設(shè)置實驗中心的網(wǎng)站logo，接下來下方我們設(shè)置一個導(dǎo)航模塊中的導(dǎo)航欄，圖片logo以及導(dǎo)航欄都是響應(yīng)式的，可以隨著分辨率的縮小，而成比例縮小，當(dāng)尺寸小于768px的時候，導(dǎo)航欄變?yōu)橐粋€具有按鈕的長條，點擊按鈕，左側(cè)的抽屜式Off-canvas類就會展示出一個豎條的導(dǎo)航欄。接下來，我們設(shè)置class=uk-flex來對內(nèi)容區(qū)域進(jìn)行布局。

我們將整個內(nèi)容部分，大致分為四行，每行我們設(shè)置三個模塊，首先是實驗室簡介模塊，簡介的詳細(xì)鏈接，我們用的是模態(tài)對話框，它是由一個遮罩層，一個對話框和一個關(guān)閉按鈕組成。通過點擊詳細(xì)按鈕或標(biāo)簽鏈接，打開一個遮罩層，顯示具體內(nèi)容。第一層中間是一個輪播的幻燈片，用來播放實驗室環(huán)境圖片等，我們還用到了swicher切換器等。首頁基本上制作完畢，經(jīng)測試，當(dāng)分辨率小于768px時，整個內(nèi)容部分的模塊都會按順序從上到下進(jìn)行排列，顯示在完整的屏幕窗口里。

除了技術(shù)上考慮我們還關(guān)注了學(xué)生用戶的體驗需求，實現(xiàn)其瀏覽網(wǎng)頁的方便性和審美性。

4 結(jié)論

真正的響應(yīng)式設(shè)計是基于靈活界面（但仍然可包括定寬控制）。其主要工作就是要讓網(wǎng)頁適配當(dāng)下種類繁多的設(shè)備，使頁面在不同設(shè)備上仍然看上去友好并且可用。使用響應(yīng)式網(wǎng)頁設(shè)計技術(shù)開發(fā)的新版網(wǎng)站讓人有令人印象深刻的體驗，使得網(wǎng)站可以在不同分辨率下進(jìn)行自我調(diào)整，使布局在不同尺寸的屏幕上能夠自如變換（如在窄屏上導(dǎo)航欄友好折疊起來、字體大小自適應(yīng)等）。真正的實現(xiàn)了一套代碼對多種設(shè)備的兼容。目前，已有許多國內(nèi)高校的門戶網(wǎng)站使用了響應(yīng)式的網(wǎng)頁設(shè)計技術(shù)，如復(fù)旦大學(xué)、清華大學(xué)、華東師范大學(xué)等，將來，響應(yīng)式的網(wǎng)頁設(shè)計技術(shù)也必將會成為高校門戶網(wǎng)站的關(guān)鍵的技術(shù)。

[1]EthanMarcotte．響應(yīng)式Web設(shè)計[M]．北京：人民郵電出版社，2016．

[2]Rob Larsen. Web 應(yīng)變之道[M]．北京：電子工業(yè)出版社，2016．

[3]張曉景．JQuery網(wǎng)頁設(shè)計深度剖析[M]．北京：電子工業(yè)出版社，2016．

TP3

A

1674-6708（2016）171-0133-02

劉金承，助理實驗師，長春金融高等?？茖W(xué)校，研究方向為計算機應(yīng)用。