葛勇平

一、自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)技術(shù)應(yīng)用的背景與環(huán)境

1.精品課程開(kāi)發(fā)的背景需要

為了引領(lǐng)學(xué)校的教學(xué)改革，促進(jìn)學(xué)校整體教學(xué)水平和培養(yǎng)質(zhì)量的提高，許多職業(yè)學(xué)校都開(kāi)始積極開(kāi)展并強(qiáng)力推進(jìn)精品專業(yè)與精品課程的建設(shè)與開(kāi)發(fā)。本著精品課程聚集優(yōu)質(zhì)教育資源，提高課程教學(xué)質(zhì)量，并在更大范圍內(nèi)進(jìn)行課程分享的宗旨，同時(shí)為了實(shí)現(xiàn)有效提高教學(xué)信息化的目的，開(kāi)發(fā)精品課程網(wǎng)站成為必需。

2.移動(dòng)互聯(lián)網(wǎng)發(fā)展的環(huán)境需要

《中國(guó)移動(dòng)互聯(lián)網(wǎng)行業(yè)市場(chǎng)前瞻與投資戰(zhàn)略規(guī)劃分析報(bào)告》的數(shù)據(jù)統(tǒng)計(jì)結(jié)果表明，隨著諸如智能手機(jī)、平板電腦等智能終端價(jià)格的不斷下探，WiFi網(wǎng)絡(luò)的廣泛覆蓋，4G網(wǎng)絡(luò)的不斷普及，移動(dòng)網(wǎng)民呈現(xiàn)爆發(fā)增長(zhǎng)的趨勢(shì)，校園里的年輕學(xué)子更是移動(dòng)互聯(lián)網(wǎng)的主力軍。如此，在精品課程網(wǎng)站設(shè)計(jì)開(kāi)發(fā)的過(guò)程中考慮學(xué)生在移動(dòng)端訪問(wèn)時(shí)的運(yùn)行效果，就成為了不可阻擋的趨勢(shì)。因此在課程網(wǎng)站的開(kāi)發(fā)過(guò)程中，不得不應(yīng)用自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)技術(shù)。

二、自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)概述

1.自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)的概念

自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)，也稱作“響應(yīng)式Web設(shè)計(jì)”。這個(gè)理念的核心是無(wú)論用戶使用的是筆記本、平板，還是各種類(lèi)型的智能手機(jī)，設(shè)計(jì)的網(wǎng)頁(yè)都能夠自動(dòng)識(shí)別各種設(shè)備的屏幕尺寸，并自動(dòng)切換顯示分辨率，圖片的尺寸以及相關(guān)腳本功能等，使得網(wǎng)頁(yè)自動(dòng)適應(yīng)設(shè)備環(huán)境，在設(shè)備上呈現(xiàn)最優(yōu)化顯示。

2.自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)的基本原理

自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)之所以能夠針對(duì)不同設(shè)備、不同尺寸的屏幕進(jìn)行自適應(yīng)，其原理就是針對(duì)不同分辨率的屏幕設(shè)計(jì)CSS規(guī)則，在加載網(wǎng)頁(yè)前先檢測(cè)設(shè)備屏幕分辨率，并選擇合適的CSS規(guī)則渲染網(wǎng)頁(yè)。

在自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)中，需要在加載網(wǎng)頁(yè)前對(duì)設(shè)備屏幕分辨率進(jìn)行檢測(cè)，這個(gè)就需要運(yùn)用到媒體查詢技術(shù)。媒體查詢是CSS3中新增的功能，媒體查詢讓CSS可以更精確作用于不同的媒體類(lèi)型和同一媒體的不同條件。

通過(guò)媒體查詢判斷出用戶設(shè)備的分辨率后，需要調(diào)用相應(yīng)的CSS樣式渲染網(wǎng)頁(yè)，在具體的CSS樣式設(shè)計(jì)中通常使用流動(dòng)布局的方式。流動(dòng)布局使用百分比來(lái)確定每個(gè)部分在屏幕上的相對(duì)寬度，由此就能夠輕松地實(shí)現(xiàn)自適應(yīng)用戶設(shè)備的分辨率。

三、自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)技術(shù)應(yīng)用實(shí)踐

1.跨終端自適應(yīng)應(yīng)用實(shí)踐

（1）Meta viewport標(biāo)簽的使用。

在網(wǎng)頁(yè)的部分添加meta標(biāo)簽，示例代碼：

，其中viewport是網(wǎng)頁(yè)默認(rèn)寬度與高度，content中設(shè)置將默認(rèn)寬度調(diào)整為屏幕寬度，并將原始縮放比例（initial-scale）設(shè)置為1，即網(wǎng)頁(yè)初始大小占屏幕的百分之百。

（2）Media query的使用。

通過(guò)媒體查詢自動(dòng)探測(cè)屏幕寬度，然后加載相應(yīng)的CSS文件。示例代碼：

。

通過(guò)媒體查詢，如果檢測(cè)的屏幕寬度小于320像素，那么將加載smallScreen.css樣式來(lái)渲染網(wǎng)頁(yè)。

（3）CSS設(shè)計(jì)與引用。

針對(duì)不同的設(shè)備分辨率，設(shè)計(jì)并引用相應(yīng)的CSS樣式，示例代碼：

@media screen and（max-device-width：320px）{...}

在CSS樣式文件中引用@media，并針對(duì)該分辨率下設(shè)計(jì)相關(guān)樣式。

2.圖片的自適應(yīng)應(yīng)用實(shí)踐

在精品課程網(wǎng)站建設(shè)中，為了使圖片支持移動(dòng)端設(shè)備，也采用了自適應(yīng)設(shè)計(jì)。相關(guān)技術(shù)處理示例：

img { max-width：100%;}

這里使用了浮動(dòng)布局的設(shè)計(jì)理念，使用百分比設(shè)置，能夠按照比例進(jìn)行自動(dòng)縮放。

3.微課視頻的自適應(yīng)應(yīng)用實(shí)踐

（1）視頻尺寸適應(yīng)問(wèn)題的處理。

對(duì)于這個(gè)問(wèn)題，類(lèi)似于圖片處理的方式，通過(guò)流動(dòng)布局方式，限定對(duì)象的最大寬度為100%來(lái)實(shí)現(xiàn)自適應(yīng)寬度的問(wèn)題。

（2）視頻格式適應(yīng)問(wèn)題的處理。

對(duì)于不同的終端對(duì)于視頻格式的支持不同的問(wèn)題，應(yīng)用Html5中的video標(biāo)簽來(lái)解決。該標(biāo)簽支持同時(shí)鏈接ogg，mpeg4，webm三種格式的視頻文件，而無(wú)論是蘋(píng)果還是安卓還是windows系統(tǒng)的主流瀏覽器均至少支持其中一種視頻格式，這樣對(duì)于視頻格式的自適應(yīng)問(wèn)題就迎刃而解。

以上對(duì)于在中職精品課程網(wǎng)站建設(shè)中的自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)進(jìn)行了初步的探討和應(yīng)用。本文僅僅起到一個(gè)拋磚引玉的作用，希望將更多的移動(dòng)互聯(lián)網(wǎng)相關(guān)的技術(shù)應(yīng)用到教育教學(xué)中，開(kāi)啟教育移動(dòng)互聯(lián)的新時(shí)代。

參考文獻(xiàn)：

[1]（英）Ben Frain.響應(yīng)式Web設(shè)計(jì)：HTML5和CSS3實(shí)戰(zhàn)[M].王永強(qiáng)譯.北京：人民郵電出版社，2013.

[2]梁婷婷，鄧廣彪.通用的精品課程網(wǎng)站的設(shè)計(jì)與開(kāi)發(fā)[J].計(jì)算機(jī)時(shí)代，2009（06）.endprint