響應式網站的設計與開發

劉金承

長春金融高等專科學校，吉林長春 130028

響應式網站的設計與開發

劉金承

長春金融高等專科學校，吉林長春 130028

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

響應式網站；CSS；高校實驗中心網站；UNKIT

1 響應式網站的設計技術

1.1什么是響應式Web

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

1.2響應式web的關鍵特性

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

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

3）斷點指的是響應式設計的目標是避免出現為每一個可能的終端設備都制作設計一個網頁。為了避免這種現象的發生，我們可以通過劃出一些邊界來調整頁面的布局用以適應變化的內容如設定分辨率“斷點”。

1.3廣義的響應式開發的流程

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

1.4響應式設計的好處

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

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

2）更容易維護。使用響應式設計，你只需要維護一套前段的代碼庫。

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

4）能夠支持未知設備。在設計的時候，響應式設計已經忽略了特定的設備和操作系統，這使得響應式設計的網站可以具有自動適配現有的或者未來的設備的能力。

1.5響應式的缺點

有些設計師不認同這種方法，認為不同設備應使用不同標記，如果用了響應式設計，所有瀏覽器和設備都會收到同一個HTML文件。

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

2 常見的開源CSS前端框架

2.1關于CSS

2.1.1CSS定義

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

2.1.2CSS的特點

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

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

當今時代眾多CSS的前端框架紛涌而至，但真正的優秀的卻屈指可數。

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

2.2.1Bootstrap

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

2.2.2UIKit by YOOtheme

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

2.2.3Foundation by ZURB

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

2.2.4Semantic UI

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

2.2.5Pure by Yahoo!

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

總之，一個好的框架是需要結合最新的網絡技術不斷升級的，特別是關于移動方面的技術。如果一個特定的框架不滿足您的需要，您可以從兩個或兩個以上的項目來混合組件，采用混搭方式。例如，你可以從一個框架得到較小的CSS樣式基礎從另一個框架得到一個優秀的柵格系統，再從第三個框架獲得更復雜的組件。

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

3 本校實驗中心響應式網站的設計

我們基于UIKit這個響應式的框架，來實現我們的實驗中心網站的改進。

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

1）默認：這些組件通常用來實現HTML元素的跨瀏覽器標準化功能，并添加了一些非常基礎的樣式。

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

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

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

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

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

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

我們使用vs2012作為工具，來進行網站的設計。

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

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

除了技術上考慮我們還關注了學生用戶的體驗需求，實現其瀏覽網頁的方便性和審美性。

4 結論

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

[1]EthanMarcotte．響應式Web設計[M]．北京：人民郵電出版社，2016．

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

[3]張曉景．JQuery網頁設計深度剖析[M]．北京：電子工業出版社，2016．

TP3

A

1674-6708（2016）171-0133-02

劉金承，助理實驗師，長春金融高等專科學校，研究方向為計算機應用。