1、響應式網頁設計(jì)

在響應式網頁設計(jì)的(de)概念提出之前，網站(zhàn)前端開(kāi)發者們為(wèi)了(le)使網站(zhàn)能(néng)夠适配各種終端設✔備(PC、手機(jī)和(hé)平闆電(diàn)腦(nǎo)等)，往往會(huì)專門(mén)針對(duì)不λ(bù)同的(de)終端設備開(kāi)發出相(xiàng)适配的(de)版本，即一(yī)個(gè)網站(zhàn)針對(duì)不(bù)同的(de)終端設備開(kλāi)發出不(bù)同的(de)前端版本，從(cóng)而達到(dào)相(xiàng)同的(de)用(yòng)戶體(tǐ)驗，但(dàn)是(shì)，如(‍rú)果有(yǒu)幾十種甚至上(shàng)百種不(bù)同型号的(de)終端設備，難道(dào)都(dōu)要(yào)為(wèi)其單獨開(kāi)發嗎(ma)?"顯然這(zhè)樣的(de)做(zuò)法并不(bù)科(kē)學，大(dà)大(dà)增加了(le)網站(zhàn)的(de)開(kāi)發成本以及日(rì)後的(de)修改成本。 于是(shì)在2010年(nián)5月(yuè)，一(yī)位名為(wèi)伊桑•馬科(kē)特的®(de)網頁設計(jì)師(shī)首次提出了(le)響應式網頁設計(jì)(ResponsiveWebDesign)的(deβ)概念，即為(wèi)網站(zhàn)開(kāi)發一(yī)個(gè)版本的(de)樣式，便能(néng)自(zì)動兼容并适配各種終端設備，且能(néng)同時(shí)達到(dào)ε相(xiàng)同的(de)用(yòng)戶體(tǐ)驗。可(kě)以說(shuō)響應式網頁設計(jì)的(d‍e)出現(xiàn)，不(bù)僅降低(dī)了(le)網站(zhàn)的(de)開(kāi)發成本，還(hái)解決了(le)終端設備的(de)兼容問(wèn)題，同時(shí)各大(dà)★搜索引擎也(yě)更喜歡響應式網頁設計(jì)的(de)網站(zhàn)，響應式網頁已成為(wèi)網站(zhàn)前端設計(jì)的(de)首選。

2、高(gāo)校(xiào)網站(zhàn)使用(yòng)響應式網頁設計(jì)的(de)現(xiàn)狀

雖然響應式網頁設計(jì)的(de)概念早就(jiù)提出了(le)，但(dàn)是(shì)在我國(guó)直到(dào)2015年≠(nián)才開(kāi)始逐漸流行(xíng)起來(lái)(可(kě)能(néng)與PC和(hé)移動設備的(de)市(shì)場(chǎng)份額有(yǒu)關)，而高×(gāo)校(xiào)網站(zhàn)使用(yòng)的(de)響應式網頁設計(jì)技(jì)術(shù)相(xi®àng)對(duì)比較落後，筆(bǐ)者對(duì)全國(guó)10個(gè)省份，每個(gè)省随機(jī)抽取了(le)10所高(gāo)"校(xiào)門(mén)戶網站(zhàn)以及招生(shēng)網站(zhàn)統計(jì)發現(xiàn)，其中門(mén)∞戶網站(zhàn)使用(yòng)響應式網頁設計(jì)的(de)高(gāo)校(xiào)有(yǒu)43%，招生(shēng)網站(zhàn)使用(yòng)響應式網頁設計(jì★)的(de)高(gāo)校(xiào)隻有(yǒu)10%。從(cóng)數(shù)據和(hé)筆(bǐ)者工(gōng)作(zuò)的(de)經驗來(lái)看(kàn)©，高(gāo)校(xiào)網站(zhàn)使用(yòng)響應式網頁設計(jì)相(xiàng)對(duì)落後的(de)原因一(yī)是(shì)管理(lǐ)者不(b↑ù)夠重視(shì)，沒有(yǒu)意識到(dào)網站(zhàn)還(hái)需要(yào)适配移動設備←，二是(shì)缺少(shǎo)專門(mén)進行(xíng)學校(xiào)網站(zhàn)開(kāi")發的(de)專職人(rén)員(yuán)，因此對(duì)于新技(jì)術(shù)的(de)應用(yòng)還(hái)需要(yào)一(yī)定的(de)時(shí)間(jiān)過程 。不(bù)過近(jìn)幾年(nián)來(lái)，越來(lái)越多(duō)的(de)高(gāo)校(xiào)門(mén)戶網站(zhàn)已經逐漸開(kāi)始使用(yòng)響應↕式網頁設計(jì)了(le)。

3、響應式網頁設計(jì)的(de)方法

3.1、響應式網頁設計(jì)的(de)技(jì)術(shù)原理(lǐ)。一(yī)個(gè)标準的(de)網頁一(yī)般由結構(HTML，XML，XHTM♠L)、表現(xiàn)(CSS)和(hé)行(xíng)為(wèi)(DOM、ECMAScript)&三部分(fēn)組成，其中結構和(hé)表現(xiàn)部分(fēn)則為(wèi)響應式網頁設計(jì)的(de)重要(yào)部分(fēn↓)，另外(wài)CSS3标準的(de)建立也(yě)為(wèi)響應式網頁設計(jì)奠定了(le)基礎。

響應式網頁設計(jì)的(de)核心技(jì)術(shù)一(yī)般由以下(xià)三部分(fēn)組成：

(1)、媒體(tǐ)查詢(MediaQueries)媒體(tǐ)查詢又(yòu)稱為(wèi)媒介查詢，即通(tōng)過CSS3的(de)@m edia聲明(míng)來(lái)查詢展示媒介(終端設備)的(de)顯示尺寸，根據不(bù)同尺寸¶的(de)終端設備來(lái)選擇不(bù)同的(de)CSS樣式，從(cóng)而達到(dào)網頁能(∑néng)自(zì)動适配多(duō)種終端的(de)效果。@media聲明(míng)從(cóng)CSS3開(kāi)始才被支持，現(xiàn)在的(deδ)移動設備中的(de)浏覽器(qì)均支持CSS3，隻有(yǒu)PC端的(de)一(yī)些(xiē)老(lǎo)舊(jiù)浏覽器(qì)不(bù)支持，如(rú)IE8以前的(de)版本≠，很(hěn)多(duō)網站(zhàn)已經放(fàng)棄這(zhè)些(xiē)老(lǎo)舊(jiù)的(de)浏覽器(¥qì)。媒體(tǐ)查詢示例代碼如(rú)下(xià)：@mediascreenand(min-width:768px){這(zhè)裡(lǐ)設置您的(de)CSS樣式代碼}

(2)、網格布局(FlexibleGrids)這(zhè)裡(lǐ)的(de)網格布局是(shì)一(yī)個(gè)寬泛的(de)概念，即結合了(le)流式布局、彈性布局和(h"é)栅格布局的(de)特性，把整個(gè)網頁劃分(fēn)成一(yī)個(gè)個(gè)網格，網頁上(shàng)每個(gè)網格可(kě)以任 意組合，最終表現(xiàn)為(wèi)一(yī)個(gè)個(gè)內(nèi)容塊。通(tōng)過與媒體(tǐ)查詢配合，同時(Ωshí)運用(yòng)流式布局中以百分(fēn)比或混合百分(fēn)比作(zuò)為(wèi)度量單位的(de)方式和(hé)彈性布局中Flex技(jì)術(shù∏)，從(cóng)而實現(xiàn)網頁響應式布局的(de)效果。

(3)、彈性圖片(FlexibleImages)響應式網頁設計(jì)中，處理(lǐ)好(hǎo)圖片也(yě)非常重要(yào)。因為(wèi)現(xi"àn)在的(de)網站(zhàn)往往會(huì)使用(yòng)大(dà)幅圖片來(lái)展示內(nèi)容，這(zhè)就(jiù)需要(yào)根據終端設備的✔(de)寬度來(lái)自(zì)動調整圖片的(de)寬度，從(cóng)而達到(dào)更好(hǎo)的(de)顯示效果。通(tōng)常的(de)≤做(zuò)法是(shì)将圖片寬度以百分(fēn)比來(lái)度量，配合max-width或back‍ground-size等CSS屬性來(lái)完成。

3.2、目前主流響應式網頁設計(jì)開(kāi)發框架介紹。我們在做(zuò)網站(zhàn)前端開(kāi)發的λ(de)時(shí)候，可(kě)以借助一(yī)些(xiē)前端開(kāi)發框架來(lái)幫助快(kuà↓i)速開(kāi)發網站(zhàn)，這(zhè)些(xiē)前端開(kāi)發框架的(de)原理(lǐ)其實就(jiù)是(shì)将布局系統、排版→樣式、導航樣式、表單樣式、按鈕樣式和(hé)表格樣式等封裝好(hǎo)，我們隻需要(yào)直接拿(ná)來(lái)引用(yòng)，而不(bù)需要(yào)單獨的(de)為(wèi)每≤個(gè)HTML标簽寫CSS樣式，還(hái)能(néng)提高(gāo)界面的(de)美(měi)觀性。

目前支持響應式網頁設計(jì)的(de)開(kāi)發框架有(yǒu)很(hěn)多(duō)，甚至自(zì)己也(yě)可(kě)以開(kāi)•發一(yī)套适合的(de)開(kāi)發框架，下(xià)面介紹幾種主流的(de)響應式網頁設計(jì)開(kāi)發框架。

(1)、Bootstrap由Twitter的(de)工(gōng)程師(shī)開(kāi)發，是(shì)一(yī)款集合HTML、CSS和(₩hé)JavaScript的(de)框架，用(yòng)于開(kāi)發響應式布局、移動設備優先的(de)網站(zhàn)，且免費(fèi)開£(kāi)源，擁有(yǒu)龐大(dà)的(de)社區(qū)支持。

(2)、Foundation由一(yī)家(jiā)專業(yè)的(de)産品設計(jì)公司ZURB開(kāi)發，是(shì)目前在商業(yè)領域使用(yòng)最為(wèi)廣泛的≤(de)一(yī)款響應式前端開(kāi)發框架，是(shì)一(yī)個(gè)易用(yòng)、強大(dà)而靈活的(de)框架，且免費(fèi)開(kāi)源。

(3)、GroundworkCSS2同樣是(shì)一(yī)款響應式HTML、CSS和(hé)Javasπcript的(de)框架，其官網還(hái)提供大(dà)量的(de)在線展示示例和(hé)開(kāi)發文(wén)檔，且免費(fèi)開(k>āi)源。

3.3、使用(yòng)響應式前端開(kāi)發框架來(lái)開(kāi)發高(gāo)校(xiào)網站(zhàn)。面對(duì)如(rú)此繁多(duō)的♣(de)前端開(kāi)發框架，高(gāo)校(xiào)網站(zhàn)隻需要(yào)挑選其中一(yī)款即可(kě)滿足需求。

通(tōng)常高(gāo)校(xiào)網站(zhàn)前端開(kāi)發步驟如(rú)下(xià)(這(zhè)裡("lǐ)僅僅提供一(yī)種思路(lù)，具體(tǐ)設計(jì)開(kāi)發的(de)細節不(bù)展開α(kāi))：

第一(yī)步設計(jì)界面，用(yòng)網格布局的(de)原理(lǐ)，将高(gāo)校(xiào)網站(zhàn)的(de)®內(nèi)容設計(jì)成一(yī)個(gè)個(gè)區(qū)塊，比如(rú)從(cóng)頁面頂端依次到(dào)頁面的(de)底端，一(yī)般為Ω(wèi)網站(zhàn)Logo、導航菜單、大(dà)圖輪播、主要(yào)欄目列表、底部聯系方式、備案信息和∞(hé)新媒體(tǐ)二維碼等。

第二步選擇一(yī)款主流的(de)前端開(kāi)發框架，通(tōng)過前端開(kāi)發框架的(de)實例，找到(dào)适σ合的(de)界面設計(jì)實例，直接拿(ná)來(lái)使用(yòng)就(jiù)可(kě)以。

第三步開(kāi)發調試您的(de)網站(zhàn)，使用(yòng)Chrome開(kāi)發者工(gōng)具可(k₽ě)以高(gāo)效調試您的(de)網站(zhàn)。

這(zhè)裡(lǐ)要(yào)注意的(de)一(yī)點是(shì)，為(wèi)了(le)确保移動終端↔的(de)适當縮放(fàng)，需要(yào)在HTML代碼的(de)<head>之中添加viewport元數(≈shù)據标簽，并設置成<metaname="viewport"content="width=device-width,initia↑l-scale=1">。