響應式布局在微網站中的應用研究

王俊歡，周如旗

（廣東第二師范學院計算機科學系，廣州 510303）

響應式布局在微網站中的應用研究

王俊歡，周如旗

（廣東第二師范學院計算機科學系，廣州 510303）

現今社會，互聯網和移動設備成為人們生活中必不可缺的元素，其中微網站的出現給人們的工作生活帶來更大的便利。通過對微網站的闡述，引入響應式布局技術，對響應式布局的用途及應用做出詳細的分析。

0 引言

在時代高速發展的今天，因為移動網絡的覆蓋以及移動設備普及，“微網站”一詞越來越頻繁地出現在人們的視線中。以往人們進行網頁的瀏覽都是通過電腦等設備來進行的，而隨著科學技術的發展，形狀、尺寸、功能各種不同的電子設備產品（例如移動電話和平板電腦）逐漸取代了電腦的功能。這些電子產品相對于電腦來說，不僅體積和重量很占優勢，在功能上來說，移動電話和平板電腦已經實現了一大部分電腦所擁有的操作功能，而它們幾乎也是在與電腦同步發展著。移動設備的出現和功能的優化促使了人們會更多地使用它來進行網頁瀏覽、網上聊天、網絡購物等各種娛樂功能。由此，“微網站”這一名詞應運而生。

微網站的出現是為了滿足移動設備的瀏覽需求，同時，隨著社會科技的發展與人類審美的提升，人們對于微網站，或者說是手機網站的要求也就越來越高。這就要求前端開發必須能設計出一個適應各種移動設備展現的頁面——響應式布局的概念就是在這樣的背景下提出來。

1 微網站的發展及重要性

微網站，在互聯網中給出的定義是：“微網站源于WebApp和網站的融合創新，兼容iOS、Android、WP等各大操作系統，可以方便地與微信、微博等應用的鏈接…”[1]，由于定義中有提到微信和微博，所以很多人誤認為微網站是在微信上運行的網站，其實這只是片面的理解。正如定義前半段所說，兼容iOS、Android、WP等各大操作系統，而這些操作系統多數用在移動設備上，如手機，所以微網站，其實就是手機網站，因為相對于傳統的PC端網站，它運行在更小的設備上，所以我們稱之為微網站。

隨著信息技術快速的發展，移動網絡作為人們進行信息交換的一個方便快捷的媒介，已經漸漸地融入到人們的生活中了。加上國內外科學技術的不斷發展和移動互聯網的普及，目前人們對于移動設備的使用已經呈現出了一種比較依賴的狀態。在這個狀態下，傳統PC端網站的接入流量已經慢慢地轉向了移動設備端的網站（即微網站）。從StatCounter公司（互聯網監測公司）所收集的數據中可以看出，通過移動設備訪問互聯網的用戶數量在2016年11月已首次超過使用桌面端訪問的用戶。同時，在全球網絡用戶中，來自手機和平板電腦的網絡流量合計已超過了50%[2]（見圖1）。

由于微網站有著完全適合各種移動設備的瀏覽和使用，能夠按照客戶屏幕的大小完美顯示，而且網站內容精簡，頁面所需消耗的資源非常小，加載速度非常快等優點，使其越來越受到人們的歡迎。但在網站建設上，相較于傳統網站來說，由于移動設備的屏幕較小，而且屏幕尺寸屏幕分辨率不一，微網站的設計在界面上要比傳統網站復雜很多。例如，在傳統網站的設計上，我們會給出某個圖片寬高的CSS:img{width:1024px;height:768px}，但如果在大多數移動設備上進行實現，這個尺寸則會遠遠超過而導致相片顯示不完整。除了圖片，使用傳統CSS設計的網站，內容也會大大超出移動設備的屏幕大小，影響使用者的瀏覽與操作。

圖1 StatCounter網絡流量監控圖

2 響應式布局

2010年5月份，伊桑·馬克特（Ethan Marcotte）提出了響應式布局的概念，該概念的意思就是讓網站能適應不同的終端，而不需要為每種終端定制一個版本的網站。自響應式布局設計提出以來，越來越多的人開始接受并且主動運用這個技術到網頁上。從近幾年的形式上來看，移動設備（如智能手機、智能電視機、大屏幕手機、個人電腦、筆記本、平板電腦等等電子設備）的發展速度如潮鳴電掣，在這樣的一個時期里，一個能適應不同分辨率、不同大小屏幕的網頁顯得尤為重要，特別是對于某些要不斷切換終端設備使用的用戶來說，這一點甚至會比只有美觀布局的網頁來得更加迫切。由于愈來愈多的設計師開始接納這一個技術，響應式布局的發展呈現出了積極的局面，設計師們在這項技術上不僅做出了許多的創新，還構建了一些完整的模式。

在現下這個移動互聯網迅速發展的時代里，我們可以看到各種新型的移動設備在不斷涌現。移動設備在快速普及，使得對原本存在的Web設計領域進行升級變成異常迫切的需要，如果還只是停留在傳統電腦桌面系統上瀏覽Web內容的這種單一形式上，Web設計的發展與用戶的需求之間就會產生越來越大的鴻溝。當出現了各種大小尺寸、不同分辨率的智能手機，平板電腦和其他的電子設備的時候，這個時候Web網頁設計人員所需要完成的事就是使得一個網頁除了在大屏幕上以固定形式展現外，還可以在大大小小的手機屏幕以及平板電腦等等的設備上以同樣的舒適界面展示給用戶。響應式布局設計的出現就為這個問題帶來了一絲曙光，我們可以看出，響應式布局的設計主要是以用戶為中心的一種設計模式，根據不同用戶的需求從而對網頁頁面進行設計，以達到每個用戶的終端設備都能獲得完美的網頁頁面布局為目標。無論是現在，還是對于未來的發展，這都是一個可靠的網頁設計方案。

3 響應式布局的應用

要很好地實現響應式布局，主要依賴的技術有：HTML5的Viewport，CSS3的Media Query和流式布局的技術。

首先我們要對Viewport做設置：使用一個＜meta＞標記把這一句代碼放到html的＜head＞標簽里：＜meta name="viewport"content="width=device-width,initialscale=1"＞，在這句代碼里定義了viewport中的width為device-width，即設備的寬度。意思就是把可視區域的寬度視為與設備的寬度一樣，這樣就可以保證頁面與屏幕保持一樣的寬度。Initial-scale設置的值為1是指網頁的初始倍數為1。

接著我們需要通過CSS中的媒體查詢Media Que?ry來實現響應式布局，其實就是達到不同的響應點（多為屏幕分辨率）時觸發媒體查詢中的代碼，所以我們還需對現有設備的屏幕分辨率進行了解后，再對響應點進行合理的設置。目前根據市場上主流終端的分辨率可以大致地進行如下的設置：PC端-大屏幕：至少1200px，常規：至少 960px；平板豎屏-至少 768px，手機到平板-至少767px，手機-至多480px。當然這種設置會隨著終端市場份額的改變而改變[3]。有了對各種終端設備的響應點了解后，就可以運用Media Query進行響應式布局的設計了。

Media Query的語法結構一般為：@media媒體類型and（媒體特性）{樣式代碼}，其中媒體類型如表1所示，常用的媒體特性如表2所示。

表1 媒體類型

表2 常用的媒體特性

通常在響應式布局中我們都會使用媒體類型screen，媒體特性min/max-device-width來響應不同的設備屏幕大小來適配我們的網站。

當了解了設備的屏幕分辨率和Media Query語句后，就可以在CSS3中使用@media。使用方法有兩種：一是在外部樣式表，即在link中使用@media；二是在樣式表中內嵌@media。

①link中使用@media：

下面我們用一個小例子來說明其運用：

在HTML頁面我們的代碼如下：

通過從Link中使用@media,當瀏覽器寬度小于768px時，CSS樣式按照mobileCss.css文件執行，當瀏覽器寬度大于768px并小于1600px時，CSS樣式按照pcCss.css文件執行。所以，測試效果如下：

瀏覽器寬度設為：1024px時，如圖2：

圖2 瀏覽器寬度為1024px

瀏覽器寬度設為：414px（Apple IPhone 6 Plus）時，如圖3。

圖3 瀏覽器寬度為414px（Apple IPhone 6 Plus）

在文件mobileCss.css中，文件中設置了內嵌@me?dia，即當屏幕小于375px時，讓left和right的字體變小，顏色改變，如圖4：

圖4 屏幕小于375px時

除了使用viewpoint和Media Query外，在代碼中，對width的設置是以百分號的形式賦值的，這就是要實現響應式布局的第三個技術，即流式布局。

流式布局英文名稱為Liquid Layout，流式布局是指網頁頁面中各部分按照一定的百分寬度比來設置。例如說像剛才例子中對類left和right的設置所使用到的兩欄布局的網頁，當左側欄占50%寬，右側欄占50%寬的時候就是兩欄布局，如果把左側欄與右側欄都設置為100%寬的時候，這個網頁的布局就從左右兩欄變成了上下兩欄的布局了。使用流式布局對于響應式設計來說就是一個很好的選擇，可以確定網頁中的元素保持一定的百分比呈現出來，比固定寬度的設置的靈活性更好。

4 結語

在網絡與計算機技術都日新月益、飛速發展的時代里，在社會進步的同時也可能會出現越來越多新的問題，這就需要依靠不斷創新的技術進步。隨著電子設備的不斷更新出代，出現的不同尺寸屏幕和屏幕分辨率會越來越多，響應式布局的設計不僅增加了網頁的靈活性，并在不同的電子設備里依然能給用戶帶來舒適的網頁界面布局，而且還使得開發者不需要制定特定的網站來適應不同的終端。所以，使用響應式布局是設計制作微網站的主要技術。

[1]搜狐.微網站的商業價值[J/OL].http://3g.k.sohu.com/t/n18010677,2014.

[2]Satcounter.Internet Usage Worldwide[EB/OL].http://gs.statcounter.com/,2017.

[3]郭華.對“響應式布局”的探究[J].數碼設計，2015（7）：22-23.

Research on the Application of Responsive Layout in Micro Website

WANG Jun-huan，ZHOU Ru-qi
（Department of Computer Science,Guangdong University of Education,Guangzhou 510303）

Nowadays,Internet and mobile devices become very important in human’s life.The one of things is Micro Website.The Micro Website pro?vides more convenience for human's life and work.Based on the description of Micro Website,analyzes the usages of the responsive layout in details.

響應式布局；微網站；移動設備

廣東省高等學校“創新強校工程”項目資助（粵教高函[2015]72號,粵教高函[2014]97號）

1007-1423（2017）28-0048-04

10.3969/j.issn.1007-1423.2017.28.013

王俊歡（1983-），男，廣東廣州人，碩士研究生，講師，研究方向為計算機應用

周如旗（1971-），男，廣西南寧人，碩士研究生，副教授，CCF高級會員（E200011750M），研究方向為機器學習,數據挖掘

2017-07-25

2017-09-30

Responsive layout;Micro Website;Mobile Device