葛勇平

一、自適應網(wǎng)頁設計技術應用的背景與環(huán)境

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

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

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

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

二、自適應網(wǎng)頁設計概述

1.自適應網(wǎng)頁設計的概念

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

2.自適應網(wǎng)頁設計的基本原理

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

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

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

三、自適應網(wǎng)頁設計技術應用實踐

1.跨終端自適應應用實踐

（1）Meta viewport標簽的使用。

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

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

（2）Media query的使用。

通過媒體查詢自動探測屏幕寬度，然后加載相應的CSS文件。示例代碼：

。

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

（3）CSS設計與引用。

針對不同的設備分辨率，設計并引用相應的CSS樣式，示例代碼：

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

在CSS樣式文件中引用@media，并針對該分辨率下設計相關樣式。

2.圖片的自適應應用實踐

在精品課程網(wǎng)站建設中，為了使圖片支持移動端設備，也采用了自適應設計。相關技術處理示例：

img { max-width：100%;}

這里使用了浮動布局的設計理念，使用百分比設置，能夠按照比例進行自動縮放。

3.微課視頻的自適應應用實踐

（1）視頻尺寸適應問題的處理。

對于這個問題，類似于圖片處理的方式，通過流動布局方式，限定對象的最大寬度為100%來實現(xiàn)自適應寬度的問題。

（2）視頻格式適應問題的處理。

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

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

參考文獻：

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

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