劉金承

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

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

劉金承

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

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

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

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

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

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

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

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

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

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

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)在通過“靈活性”來解決“不確定性”策略來實(shí)現(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)式的缺點(diǎn)

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

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

2 常見的開源CSS前端框架

2.1關(guān)于CSS

2.1.1CSS定義

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

2.1.2CSS的特點(diǎn)

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

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

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

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

2.2.1Bootstrap

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

2.2.2UIKit by YOOtheme

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

2.2.3Foundation by ZURB

Foundation是這幾個框架中第二大的，在像ZURB一樣實(shí)力雄厚的公司支持下，這個框架確實(shí)很強(qiáng)大，是的，就是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)合或獨(dú)立使用它們。

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

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

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

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

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

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

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

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

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

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

4 結(jié)論

真正的響應(yīng)式設(shè)計是基于靈活界面（但仍然可包括定寬控制）。其主要工作就是要讓網(wǎng)頁適配當(dāng)下種類繁多的設(shè)備，使頁面在不同設(shè)備上仍然看上去友好并且可用。使用響應(yīng)式網(wǎng)頁設(shè)計技術(shù)開發(fā)的新版網(wǎng)站讓人有令人印象深刻的體驗(yàn)，使得網(wǎng)站可以在不同分辨率下進(jìn)行自我調(diào)整，使布局在不同尺寸的屏幕上能夠自如變換（如在窄屏上導(dǎo)航欄友好折疊起來、字體大小自適應(yīng)等）。真正的實(shí)現(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

劉金承，助理實(shí)驗(yàn)師，長春金融高等?？茖W(xué)校，研究方向?yàn)橛嬎銠C(jī)應(yīng)用。